Is it possible to test the current type of an element from a SASS mixin?

Question

I have a mixin that draws a button like this:

@mixin button { border: 1px solid $orange; background: $orange; padding:0; height:27px; text-transform: uppercase; color:white; display:block; // if I'm styling an a tag padding-top:10px 10px 0 10px; } 

I want to be able to do this:

 button.my_button { @include button; } a.my_button { @include button; } 

The second requires some additional user code. Is it possible to include a condition in mixin that checks if I am building a tag, or do I need to write a second mixin?

Answer 1

Sass 3.3 and older

Inside mixin, no. If you are open to continue, you can get pretty close:

 $orange: lighten(orange, 10%); %button { border: 1px solid $orange; background: $orange; padding:0; height:27px; text-transform: uppercase; color:white; display:block; } a%button { padding-top:10px 10px 0 10px; } button.my_button { @extend %button; } a.my_button { @extend %button; } 

Compiles:

 button.my_button, a.my_button { border: 1px solid #ffb733; background: #ffb733; padding: 0; height: 27px; text-transform: uppercase; color: white; display: block; } a.my_button { padding-top: 10px 10px 0 10px; } 

Sass 3.4 and later

Starting from 3.4, we can explore and control the selector.

 $orange: lighten(orange, 10%); @mixin button { border: 1px solid $orange; background: $orange; padding:0; height:27px; text-transform: uppercase; color:white; display:block; @if is-superselector('a', &) { padding-top: 10px 10px 0 10px; } } button { @include button; } b a.foo { @include button; } 

Output:

 button { border: 1px solid #ffb733; background: #ffb733; padding: 0; height: 27px; text-transform: uppercase; color: white; display: block; } b a.foo { border: 1px solid #ffb733; background: #ffb733; padding: 0; height: 27px; text-transform: uppercase; color: white; display: block; padding-top: 10px 10px 0 10px; } 

Answer 2

At the time of this writing, there is no way to check the type of context / element in a conditional expression. But you can set the default value in your conditional expression and, thus, simplify the standard connection option.

Here is an example:

 @mixin button($type: normal) { border: 1px solid orange; background: orange; color: white; display: block; @if $type == anchor { padding: 10px 10px 0 10px; } @else { padding: 0; } } button.my_button { @include button; } a.my_button { @include button($type: anchor); } 

Take a look at the action at http://sassmeister.com/gist/6284603 .

It looks like this feature is (possibly) planned for Sass 3.3 with the @at-root directive: https://github.com/nex3/sass/issues/774 .

Answer 3

Why don't you use the @content directive.

 $orange: #000; @mixin button { border: 1px solid $orange; background: $orange; padding: 0; height: 27px; text-transform: uppercase; color: white; display: block; @content; } button.my_button { @include button; } a.my_button { @include button { padding-top:10px 10px 0 10px; }; } 

Using this approach, you do not touch your mixing, and you will still have the necessary functionality.