Sass scss：嵌套和多个类？

我正在为我当前的项目使用Sass（.scss）

以下示例：

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

这很有效

我可以在使用嵌套样式时处理多个类

在上面的示例中，我讨论的是：

CSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

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

  &--red {
    background: red;
  }
}

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

.container {
    background:red;
    color:white;

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

.container.desc{
背景：蓝色；
}

在这种情况下，所有

div.container

通常为

red

，但

div.container.desc

为蓝色

如何使用Sass将此嵌套在

容器中？
您可以使用
&
，编译后它将被父选择器替换：

例如：

.container{
背景：红色；
&.描述{
背景：蓝色；
}
}
/*汇编至：*/
.集装箱{
背景：红色；
}
.container.desc{
背景：蓝色；
}

&
将完全解析，因此如果父选择器本身嵌套，则嵌套将在替换
&
之前解析

此符号最常用于书写：

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

.container{
背景：红色；
#身份证&{
背景：蓝色；
}
}
/*汇编至：*/
.集装箱{
背景：红色；
}
#货柜编号{
背景：蓝色；
}

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

*：在
&
前面不允许有空格以外的字符。因此，您无法直接连接
选择器
+
&
-
#id&
将引发错误
 如果是这样，我认为您需要使用更好的方法来创建类名或类名约定。例如，正如您所说，您希望
.container
类根据特定的用法或外观具有不同的颜色。您可以这样做：

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

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

  &--red {
    background: red;
  }
}

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

.container {
    background:red;
    color:white;

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

CSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

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

  &--red {
    background: red;
  }
}

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

.container {
    background:red;
    color:white;

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

上面的代码基于类命名约定中的边界元方法。您可以检查此链接：

克里斯托夫的答案是完美的。然而，有时你可能想上不止一节课。在这种情况下，您可以尝试根目录下的
@和
{}
css功能，这将使两个根类能够使用
&
彼此相邻

这不起作用（由于
之前无任何内容&
规则）：


容器{
背景：红色；
颜色：白色；
.desc&{
背景：蓝色；
}
.你好{
左侧填充：50px；
}
}
使用
&

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

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

  &--red {
    background: red;
  }
}

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

.container {
    background:red;
    color:white;

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

只是一个旁注，
&
的一个常见用法是在使用伪元素和伪类时。例如：
&:hover
@crush For completure'为了完整起见，我在答案中添加了这个。谢谢你的评论。谢谢。我认为我是愚蠢的，因为它没有提到的基础指南！顺便说一句，文档已经将URL移动到：如果在一行末尾使用了
&
，它会将该行放在所有其他级别的其余类的开头。您可以通过在
.container
下执行
和.desc
来组合元素，这将向其追加.desc，从而产生
.container.desc
scss lint建议使用“&:：hover”（双冒号），您应该使用双类选择器。这个问题是Sass中嵌套选项的一个完美例子。你可以在这里读到这些，注意这听起来不错，但无论如何都应该避免。将来，当您尝试在项目中搜索
.container--desc
而最终没有结果时，您将感谢我。