SASS mixin - hot to limit to a certain type of tag? -

this question has answer here:

• is possible test current element type within sass mixin? 3 answers

@mixin foobar(){   outline: 1px solid red;   td#{&}{     outline: 1px solid blue;   } }  .foo{   @include foobar; } 

outputs :

.foo {   outline: 1px solid red; }  .foo td.foo {   outline: 1px solid blue; } 

i output :

.foo {   outline: 1px solid red; }  td.foo {   outline: 1px solid blue; } 

how can achieved ? played "@at-root" doesn't seem meant that.

i can see 2 ways here. complex one:

@mixin foobar($class, $tags...) {   @each $tag in $tags {     $selector: $tag + $class;     @at-root #{$selector} {       outline: 1px solid blue;     }   } }  .bar {   @include foobar(&, 'tr', 'td'); } 

output:

tr.bar { outline: 1px solid blue; } td.bar { outline: 1px solid blue; } 

and easy one:

%abs_foo {   outline: 1px solid blue; }  .foo {   @at-root td#{&} {     @extend %abs_foo;   }    @extend %abs_foo; } 

with output:

.foo, td.foo { outline: 1px solid blue; } 

i have created gist you: http://sassmeister.com/gist/361cd515562035b0ffa7