Sass .scss：嵌套和多个类？

Question

Sass .scss：嵌套和多个类？我正在使用Sass（.scss）来完成我当前的项目。以下示例：HTML<div class="container desc">     <div class="hello">         Hello World     </div></div>SCSS.container {     background:red;     color:white;     .hello {         padding-left:50px;     }}这非常有效。我可以在使用嵌套样式时处理多个类。在上面的示例中，我正在谈论这个：CSS.container.desc {     background:blue;}在这种情况下，所有div.container通常会red，但div.container.desc会是蓝色的。我如何container用Sass将其嵌入其中？

Answer 1

您可以使用父选择器引用 &，它将在编译后由父选择器替换：

对于你的例子：

.container {
    background:red;
    &.desc{
       background:blue;
    }}/* compiles to: */.container {
    background: red;}.container.desc {
    background: blue;}

该&会彻底解决，因此，如果你的父母选择嵌套本身，嵌套将更换前解决&。

这种表示法最常用于编写伪元素和类：

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }}

但是，您可以放置&几乎任何您喜欢的位置^*，因此也可以使用以下内容：

.container {
    background:red;
    #id &{
       background:blue;
    }}/* compiles to: */.container {
    background: red;}#id .container {
    background: blue;}

但请注意，这会以某种方式破坏您的嵌套结构，从而可能会增加在样式表中查找特定规则的工作量。

*：在前面不允许有空格以外的其他字符&。所以你不能直接连接selector+ &- #id&会抛出错误。

Answer 2

如果是这种情况，我认为您需要使用更好的方法来创建类名或类名约定。例如，就像你说的那样，你希望.container课程根据具体的用法或外观有不同的颜色。你可以这样做：

SCSS

.container {
  background: red;
  &--desc {
    background: blue;
  }
  // or you can do a more specific name
  &--blue {
    background: blue;
  }
  &--red {
    background: red;
  }}

CSS

.container {
  background: red;}.container--desc {
  background: blue;}.container--blue {
  background: blue;}.container--red {
  background: red;}

上面的代码基于类命名约定中的BEM方法。您可以查看以下链接：BEM - 块元素修改器方法