SCSS variables as @extend class

Question

My idea is that I would like to write quiet classes for input[type=text] , input[type="password"] and input[type=submit] . I would then @extend them in mixin, passing through a variable.

My parser throws this error;

 Syntax error: Invalid CSS after " @extend ": expected selector_sequence, was "$type;" 

Here is my code;

 %text { (text styling) } %password { @extend %text; } %submit { padding: .5em; background-color: $button-color; border: none; cursor: pointer; color: white; border: 1px solid darken($button-color, 20%); &:hover { @include transition; background-color: darken($button-color, 10%); } } @mixin input($type) { margin-bottom: 1.5em; margin-left: 0; outline: none; @extend $type; } 

Any help would be appreciated

Answer 1

try using variable interpolation

 @extend #{$type}; 

Additional Information About SASS Reference

Answer 2

While Fabrizio's answer is formally correct, think about it wrong.

There is an excellent rule in programming: "Keep it simple, stupid!" aka KISS .

Although SASS provides advanced features such as extends and mixins, this does not mean that you should use them as much as possible. Don't make your code complicated when you don't need to!

This code does exactly what you want: applying styles to input[...] selectors:

 input { margin-bottom: 1.5em; margin-left: 0; outline: none; } input[type=text], input[type=password] { font-family: Verdana; // Text styles } input[type=submit] { padding: .5em; background-color: $button-color; border: none; cursor: pointer; color: white; border: 1px solid darken($button-color, 20%); &:hover { @include transition; background-color: darken($button-color, 10%); } } 

If you want to apply styles to custom classes / identifiers, consider this approach:

 ///////////////// // Silent classes ///////////////// %input { margin-bottom: 1.5em; margin-left: 0; outline: none; } %text { @extend %input; font-family: Verdana; } %password { @extend %text; } %submit { @extend %input; padding: .5em; background-color: $button-color; border: none; cursor: pointer; color: white; border: 1px solid darken($button-color, 20%); &:hover { @include transition; background-color: darken($button-color, 10%); } } /////////////////////////// // Applying silent classes: /////////////////////////// .some .weirdly .nested input[type=text] { @extend %text; } .password { @extend %password; } #the-submit-button { @extend %submit; } 

Demo: http://sassbin.com/gist/5956909/