Generated by SassMeister.com.

SassMeister-input.scss

// ----
// 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;
}

SassMeister-output.css

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;
}