在Sass中，我可以使用&x&y&z吗？

Question

在Sass中，我想要做的是：

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

生成的CSS需要符合以下要求：

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

这能在Sass中实现吗？还是我必须多次写出父元素？

- wjwtheone

---

如果你想测试像这样的sass代码，但不确定它是否有效，你可以访问https://www.sassmeister.com/（或任何其他你选择的sass转换器），并进行试错，直到完成。 - xhadon

谢谢您的建议，我已经尝试过了，但是我无法解决它。 - wjwtheone

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;
}

- Engineer

Answer 2

如果你正在使用Less，语法将会是这样的：

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

然而，Sass不允许将&直接与同一选择器中的另一个&连接。相反，重用必须使用插值（#{...}）：

.test {
  &#{&}-b#{&}-c {
    font-size: 16px;
  }
}

- zzzzBov