css - 在 sass 中我可以有 &x&y&z

Question

我想在 sass 中做

asdf{
   &-b&-c {font-size: 16px;}
}

对于生成的css是

asdf.asdf-b.asdf-c{
   font-size: 16px;
}

这可以用 sass 实现吗？ 或者我将不得不多次写出父元素

Answer 1

你可以使用mixins:

@mixin fontSize($selector) {
  .#{$selector}.#{$selector}-b.#{$selector}-c {
    font-size: 16px;
  }
}

@include fontSize("asdf");

结果

.asdf.asdf-b.asdf-c {
  font-size: 16px;
}