Question

@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”，但似乎并不意味着这样做。

Answer 1

我可以在这里看到两种方式。复杂的一个：

@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

SASS mixin - 热到限制某种类型的标签？

1 个答案: