Question

我正在使用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

您可以使用parent selector reference &，编译后它将替换为父选择器：

对于你的例子：

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

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

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

这种表示法最常用于编写pseudo-elements and -classes：

.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 — Block Element Modifier Methodology

Answer 3

Christoph的答案很完美。但是，有时您可能想上一堂以上的课。在这种情况下，您可以尝试使用@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;
    }
}

Answer 4

使用&

SCSS

.container {
    background:red;
    color:white;

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

https://sass-lang.com/documentation/style-rules/parent-selector

Sass .scss：嵌套和多个类？

4 个答案: