SASS mixin - 热限制某种类型的标签?
SASS mixin - hot to limit to a certain type of tag?
@mixin foobar(){
outline: 1px solid red;
td#{&}{
outline: 1px solid blue;
}
}
.foo{
@include foobar;
}
输出:
.foo {
outline: 1px solid red;
}
.foo td.foo {
outline: 1px solid blue;
}
我想输出:
.foo {
outline: 1px solid red;
}
td.foo {
outline: 1px solid blue;
}
如何实现?我玩过“@at-root”,但它似乎并不意味着这样做。
我可以在这里看到两种方式。复杂的:
@mixin foobar($class, $tags...) {
@each $tag in $tags {
$selector: $tag + $class;
@at-root #{$selector} {
outline: 1px solid blue;
}
}
}
.bar {
@include foobar(&, 'tr', 'td');
}
输出:
tr.bar { outline: 1px solid blue; }
td.bar { outline: 1px solid blue; }
简单的:
%abs_foo {
outline: 1px solid blue;
}
.foo {
@at-root td#{&} {
@extend %abs_foo;
}
@extend %abs_foo;
}
输出:
.foo, td.foo { outline: 1px solid blue; }
我已经为你创建了一个要点:http://sassmeister.com/gist/361cd515562035b0ffa7
@mixin foobar(){
outline: 1px solid red;
td#{&}{
outline: 1px solid blue;
}
}
.foo{
@include foobar;
}
输出:
.foo {
outline: 1px solid red;
}
.foo td.foo {
outline: 1px solid blue;
}
我想输出:
.foo {
outline: 1px solid red;
}
td.foo {
outline: 1px solid blue;
}
如何实现?我玩过“@at-root”,但它似乎并不意味着这样做。
我可以在这里看到两种方式。复杂的:
@mixin foobar($class, $tags...) {
@each $tag in $tags {
$selector: $tag + $class;
@at-root #{$selector} {
outline: 1px solid blue;
}
}
}
.bar {
@include foobar(&, 'tr', 'td');
}
输出:
tr.bar { outline: 1px solid blue; }
td.bar { outline: 1px solid blue; }
简单的:
%abs_foo {
outline: 1px solid blue;
}
.foo {
@at-root td#{&} {
@extend %abs_foo;
}
@extend %abs_foo;
}
输出:
.foo, td.foo { outline: 1px solid blue; }
我已经为你创建了一个要点:http://sassmeister.com/gist/361cd515562035b0ffa7