SCSS Selector Grouping, Interpolation & Manipulation

inputs.scss

/*
 * This approach was initally inspired by Bourbons (bourbon.io) approach on packing CSS Selectors together in one
 * variable so you can easily do stuff with a group of selectors. 
 * Since the SASS 3.4 release you don't need any extra mixins to append classes or pseudo-classes on a selector list.
 */
 

// Our Collection of input types we want to bind together
$_inputs-list:'input[type="email"]',
              'input[type="number"]',
              'input[type="password"]',
              'input[type="search"]',
              'input[type="tel"]',
              'input[type="text"]',
              'input[type="url"]',
              'input[type="color"]',
              'input[type="date"]',
              'input[type="datetime"]',
              'input[type="datetime-local"]',
              'input[type="month"]',
              'input[type="time"]',
              'input[type="week"]';

// Bind all plain inputs in one Variable
$all-text-inputs: $_inputs-list;

// Add a :hover pseudoclass with the new selector-append() function
$all-text-inputs-hover: selector-append($_inputs-list, ':hover');

// Add a :focus pseudoclass with the new selector-append() function
$all-text-inputs-focus: selector-append($_inputs-list, ':focus');

/*
 * USE IT
 */
 
#{$all-text-inputs} {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #ccc;
  transition: border 200ms;
}

/* RESULT SELECTOR
input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] { ... }
*/

#{$all-text-inputs-focus} {
  border: 1px solid #999;
}
/* RESULT SELECTOR
input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus { ... }
*/

Very interesting approach there.

I've just taken a look if something similar existed in LESS and heureka... not so much: http://stackoverflow.com/questions/17662644/group-css-selectors-in-less-for-pseudo-class-use

Obviously I'd need to write the selector (group of selectors) down, instead of creating a variable for the group.

Well apparently Sass kicks Less' ass once again. To be honest, things like this made me choose Sass over Less. Also features like Maps and stuff. In whole Sass is more robust and has more functionality.