标签文章

CSS 嵌套 又一次成为了热门话题。还记得今年早些时候，Adam 和 Miriam 将三种语法选项提出来进行投票 吗？这些结果已经统计出来了，结果非常明显。

现在又有了另一个机会……

以下是 Kilian Valkhof 关于 CSS 嵌套 的文章，它目前还没有在浏览器中实现，但很快就会实现。他注意到 CSS 嵌套和 Sass 或 Less 中的嵌套之间存在一些差异。例如，以下代码

div 

我们没有 CSS 中的“常规”嵌套。也许 这个 有一天会成为现实，或者类似的东西。那将会很酷，尽管那个预规范没有提到任何关于媒体查询的内容。我希望我们能从一开始就将其纳入……

是的，你可以，而且嵌套顺序并不重要。不需要 CSS 预处理器。它可以在常规 CSS 中工作。

这可以工作

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

因此……

我喜欢嵌套我的 @media 查询断点。对我来说，这可能是 Sass 最重要的功能。也许我 选择一种方法 然后像这样来做

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }

Brad Frost 前几天问了这个问题……

Sass 用户，你们是怎么做的，为什么？pic.twitter.com/dIBA9BIuCO

— Brad Frost (@brad_frost) 2018 年 10 月 1 日

.c-btn {
  &__icon {
      ...
  }
}

我想从技术上讲这算是“嵌套”，但……

以下是来自 Salsita Software 的 Filip Naumovic 的客座文章。Filip 构建了 一个 Sass 工具 来帮助解决一个我知道我经常遇到的问题。你很开心地在 Sass 中嵌套。你可能嵌套了一两层，或者……

& 是 Sass (和 Less) 中一个非常有用的功能。它在嵌套时使用。当你懂得如何使用它时，它可以节省很多时间，或者当你遇到困难并且可能……