没有预处理器的 CSS 嵌套的标准语法

介绍

从历史上看，编写嵌套 CSS 规则需要 Sass (SCSS)、Less 或 PostCSS 等预处理工具。

然而，浏览器供应商已经标准化了 CSS 嵌套规范。如今，您可以直接在纯 CSS 文件中编写嵌套选择器，并在所有现代 Web 浏览器中本机运行它们。

本文回顾了本机 CSS 嵌套的标准语法，并解释了其行为与 Sass 编译的不同之处。

1. 原生 CSS 嵌套的基础知识

标准 CSS 嵌套看起来与 Sass 中使用的嵌套结构非常相似。

基本示例

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;

  /* Nest child elements directly */
  .card-title {
    font-size: 1.5rem;
    color: #333;
  }

  /* Use the & character to target pseudo-classes like hover */
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

该规范的早期草案要求在所有嵌套选择器之前放置 & 前缀。最终的标准删除了这一要求，允许您直接嵌套类名 (.card-title) 和 HTML 元素 (h3)，而无需 & 符号。

2. 与 Sass 的主要区别：避免字符串连接

如果您来自 Sass，要记住的最重要的规则是 原生 CSS 嵌套不支持基于后缀的类名连接（例如，BEM 语法）。

Sass 方式（原生 CSS 不支持）

/* This compiles in Sass, but fails in native CSS */
.button {
  display: inline-block;

  &--large { /* Sass compiles this to: .button--large */
    padding: 15px 30px;
  }
}

原生 CSS 行为

在本机 CSS 中，& 符号将完整的父选择器表示为元素对象，而不是原始文本字符串。因此，像 &--large 这样的后缀连接是无效的。

原生 CSS 的正确方法

要本地组合选择器，您必须声明完整的类名：

.button {
  display: inline-block;

  &.button--large { /* Correctly targets: .button.button--large */
    padding: 15px 30px;
  }
}

3. 在父选择器中放置与号 (&)

您可以将 & 符号放置在嵌套选择器的末尾或中间。当您只想将样式应用到位于特定父容器内的元素时，这非常有用。

例子

.theme-text {
  color: #333; /* Default text color */

  /* Apply styles only when nested under a .dark-mode container */
  .dark-mode & {
    color: #fff; /* Dark mode color */
  }
}

这会编译为 .dark-mode .theme-text { color: #fff; } 的等效项，将主题样式封装在 .theme-text 块中。

结论：何时从 Sass 迁移

所有现代浏览器都支持本机 CSS 嵌套。

何时继续使用 Sass： 如果您的代码库严重依赖变量、Mixin（函数）来生成动态样式或基于后缀的类串联 (&__child)，那么保留预处理管道是合理的。
何时迁移到原生 CSS： 如果您正在构建组件库或希望通过删除编译器依赖项来简化构建管道，那么迁移到本机 CSS 嵌套是一个不错的选择。

了解本机嵌套规则，以编写干净、可维护的样式表。