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

【问题标题】：What is the Sass equivalent to this LESS code that applies multiple sub-CSS classes?与这个应用多个子 CSS 类的 LESS 代码等效的 Sass 是什么？
【发布时间】：2017-02-28 22:23:09
【问题描述】：

这在 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 编写这个简单的例子？

【问题讨论】：

你的 sass 代码在哪里？
这是我的问题 =)
我认为你需要一个 mixin
您始终可以使用双嵌套选择器，其中一个用于&.block--modifier2 在块中用于&--modifer

标签： css sass

【解决方案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; }

【讨论】：

没问题！乐于助人:)

【解决方案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;
}

【讨论】：