Sass .scss：嵌套和多个类？

如果是这样，我认为您需要使用一种更好的方法来创建类名或类名约定。例如，就像您说的那样，您希望.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 —块元素修改器方法

克里斯托夫的答案是完美的。但是，有时您可能想上一堂以上的课。在这种情况下，您可以尝试使用@at-root和的#{}CSS功能，使两个根类可以使用并排放置&。

这是行不通的（由于nothing before &规则）：

container {
    background:red;
    color:white;
    
    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

但这将（使用@at-root plus #{&}）：

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

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

例如：

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

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

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

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

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

但是，您&几乎可以将^*放置在您喜欢的任何位置^*，因此也可以执行以下操作：

.container {
    background:red;
    #id &{
       background:blue;
    }
}

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

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

*：不允许在空格前使用除空格以外的其他字符&。因此，您不能将selector+ 直接串联&- #id&会引发错误。