CSS 嵌套

CSS 嵌套是指在一个 CSS 规则块内部，可以再嵌套一个 CSS 规则块，从而可以更加有效地组织和管理样式代码。

嵌套语法

CSS 嵌套的语法和 HTML 标签的嵌套非常类似，使用大括号 {} 包裹需要嵌套的 CSS 规则块，例如：

.button {
  color: #fff;

  .primary {
    background-color: #007bff;
  }

  .danger {
    background-color: #dc3545;
  }
}

这段代码定义了 .button 类的样式，其中 .primary 和 .danger 是嵌套在 .button 中的 CSS 规则块。这样就可以轻松地定义相同元素的不同状态样式，同时也减少了代码的冗余。

祖先选择器

在 CSS 嵌套中，还可以使用 & 符号表示当前规则块的父元素。例如：

.button {
  color: #fff;

  &.primary {
    background-color: #007bff;
  }

  &.danger {
    background-color: #dc3545;
  }
}

这段代码和上面的代码效果是一样的，只不过使用了 & 符号来表示 .button 父元素的选择器。

嵌套属性

CSS 嵌套不仅可以嵌套规则块，还可以嵌套属性。例如：

.button {
  font: {
    size: 14px;
    weight: bold;
  }
  color: #fff;

  &.primary {
    background: {
      color: #007bff;
      image: none;
    }
  }

  &.danger {
    background: {
      color: #dc3545;
      image: none;
    }
  }
}

这段代码中，font 和 background 属性都使用了嵌套语法，这样可以更加清晰地组织样式代码。

总结

CSS 嵌套可以有效地组织和管理样式代码，减少代码的冗余，提高代码的可维护性。但需要注意，过度嵌套会导致代码可读性和性能降低，应该合理使用。