Question

这适用于LESS：

.block {

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

  // If block has both modifiers
  &--modifer&--modifier2 {
    background: orange;
  }

}

最后一个选择器变为（如预期的那样）;

.block--modifer.block--modifier2 {
  background: orange;
}

可在此尝试：

http://winless.org/online-less-compiler

但是相同的代码对Sass不起作用，可以在这里尝试：

http://www.sassmeister.com/

相反，您会收到错误：

Invalid CSS after "&--modifer": expected "{", was "&--modifier2"
"&--modifier2" may only be used at the beginning of a compound selector.

你如何用Sass写这个简单的例子？

Answer 1

您可以通过插入父选择器&轻松编写它。

.block {

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

  // Just interpolate parent selector
  &--modifer#{&}--modifier2 {
    background: orange;
  }

}

生成以下css

.block--modifer1 {
  background: red; }

.block--modifier2 {
  background: blue; }

.block--modifer.block--modifier2 {
  background: orange; }

Answer 2

你可以这样做

演示 - http://www.sassmeister.com/gist/d75b6e741a1ec0d58a544abfc72c6ab7

.block{

  &--modifer1 {
    background: red;
  }

  &--modifier2 {
    background: blue;
  }

 &--modifier {
    @at-root &#{&}2 {
        color:orange;
    }
}

}

输出

.block--modifer1 {
  background: red;
}
.block--modifier2 {
  background: blue;
}
.block--modifier.block--modifier2 {
  color: orange;
}

与应用多个子CSS类的LESS代码等效的Sass是什么？

2 个答案: