css - 结合。 SASS 中的(点)和 &(符号)

Question

SASS 语法:

.rule{
    &-first.&-second{
        /*rules*/
    }
}

生成错误“无效的 CSS...”

预期输出:

.rule-first.rule-second{
    /*rules*/
}

可以吗？怎么办？

Answer 1

您可以使用 @at-root 和插值来做到这一点。您需要使用支持这些功能的 SASS 版本。

.rule {
    @at-root #{&}-first#{&}-second{
        /*rules*/
    }
}

输出到:

.rule-first.rule-second {
  /*rules*/
}

演示:http://sassmeister.com/gist/f7f9e25a0896e47e0adc