418

我正在为我当前的项目使用 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都是蓝色的。reddiv.container.desc

container我怎样才能用 Sass把它嵌套在里面？

4

6 回答 6

700

可以使用父选择器引用 &，编译后会被父选择器替换：

对于您的示例：

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

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

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

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

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

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

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

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

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

*：在 . 前面不允许使用除空格以外的其他字符&。所以你不能直接连接selector+ &-#id&会引发错误。

于 2012-06-18T14:18:41.247 回答
23

如果是这种情况，我认为您需要使用更好的方法来创建类名或类名约定。例如，就像您说的那样，您希望.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 Methodology。您可以查看此链接：BEM — Block Element Modifier Methodology

于 2017-11-09T07:09:56.710 回答
4

克里斯托夫的回答是完美的。但是，有时您可能想上更多的课而不是一门。在这种情况下，您可以尝试使用.css@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;
    }
}

于 2019-12-26T19:49:28.763 回答
1

采用&

SCSS

.container {
    background:red;
    color:white;

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

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

于 2020-10-20T15:00:10.247 回答
0

除了 Cristoph 的回答之外，如果您想在声明中更具体，您可以引用容器类组件的所有子组件。这可以通过以下方式完成：

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

这编译为：

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

我希望这对你有帮助！

于 2021-09-11T10:51:26.043 回答
0

这对我有用

<div class="container">
  <div class="desc">
    desc
  </div>
  <div class="asc">
    asc
  </div>
</div>

.container{
  &.desc {
    background: blue;
  }
  &.asc {
    background: red;
  }
}
于 2022-02-07T20:27:19.787 回答