Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----
// ---------- //
// Sass stuff //
// ---------- //
/// Build a selector for all inputs.
/// @param {Arglist} $events - Events to be appended to each part of selector.
/// @return {List} Selector
@function inputs($events...) {
// If selector lists has been cached (to avoid looping every time),
// fetch it, else create a new empty variable
$selector: if(global-variable-exists("__cache-inputs__"), $__cache-inputs__, null);
// If `$selector` is `null`, build the selector list.
@if not $selector {
$inputs: ();
@each $type in "color", "date", "datetime", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week" {
$inputs: append($inputs, unquote('[type="' + $type + '"]'), comma);
}
$selector: selector-append("input", $inputs);
// Create a global variable to cache the result
// in order to avoid recomputing the whole thing everytime.
$__cache-inputs__: $selector !global;
}
// If `$events` is truthy, append events pseudo-classes to the selector.
@if length($events) > 0 {
$appended-events: ();
@each $event in $events {
$appended-events: append($appended-events, ':' + $event, comma);
}
// Return selector
@return selector-append($selector, $appended-events);
}
// Return selector
@return $selector;
}
// ---------- //
// Tests //
// ---------- //
#{inputs()} {
background: deepskyblue;
}
// Same as:
// #{inputs()} {
// &:hover {
// ...
// }
// }
#{inputs('hover')} {
background: tomato;
}
// Same as:
// #{inputs()} {
// &:focus {
// ...
// }
// }
#{inputs('focus')} {
background: gold;
}
// Same as:
// #{inputs()} {
// &:active {
// ...
// }
// }
#{inputs('active')} {
background: lightgreen;
}
// Same as:
// #{inputs()} {
// &:active, &:hover, &:focus {
// ...
// }
// }
#{inputs('active', 'hover', 'focus')} {
background: lightgreen;
}
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
background: deepskyblue;
}
input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover {
background: tomato;
}
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus {
background: gold;
}
input[type="color"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="email"]:active, input[type="month"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="text"]:active, input[type="time"]:active, input[type="url"]:active, input[type="week"]:active {
background: lightgreen;
}
input[type="color"]:active, input[type="color"]:hover, input[type="color"]:focus, input[type="date"]:active, input[type="date"]:hover, input[type="date"]:focus, input[type="datetime"]:active, input[type="datetime"]:hover, input[type="datetime"]:focus, input[type="datetime-local"]:active, input[type="datetime-local"]:hover, input[type="datetime-local"]:focus, input[type="email"]:active, input[type="email"]:hover, input[type="email"]:focus, input[type="month"]:active, input[type="month"]:hover, input[type="month"]:focus, input[type="number"]:active, input[type="number"]:hover, input[type="number"]:focus, input[type="password"]:active, input[type="password"]:hover, input[type="password"]:focus, input[type="search"]:active, input[type="search"]:hover, input[type="search"]:focus, input[type="tel"]:active, input[type="tel"]:hover, input[type="tel"]:focus, input[type="text"]:active, input[type="text"]:hover, input[type="text"]:focus, input[type="time"]:active, input[type="time"]:hover, input[type="time"]:focus, input[type="url"]:active, input[type="url"]:hover, input[type="url"]:focus, input[type="week"]:active, input[type="week"]:hover, input[type="week"]:focus {
background: lightgreen;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment