嵌套规则

嵌套让 CSS 选择器层级对应 HTML 结构，代码更清晰。

Sass 嵌套

// 基本嵌套
.nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

编译结果：

.nav ul { list-style: none; }
.nav li { display: inline-block; }
.nav a { color: blue; }
.nav a:hover { color: red; }

Less 嵌套

// 语法与 Sass 相同
.nav {
  ul {
    list-style: none;
  }

  a {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

父选择器 &

& 引用父选择器：

.button {
  color: blue;

  &:hover { color: red; }
  &:active { color: green; }
  &.disabled { opacity: 0.5; }
}

// 编译结果
// .button:hover { color: red; }
// .button.active { color: green; }

添加后缀

.button {
  &-primary { background: blue; }
  &-secondary { background: gray; }
}

// 编译结果
// .button-primary { background: blue; }
// .button-secondary { background: gray; }

反向嵌套

.container {
  .theme-dark & {
    background: #333;
  }
}

// 编译结果
// .theme-dark .container { background: #333; }

Sass 与 Less 语法差异

嵌套属性（Sass 特有）

.font {
  font: {
    family: Arial;
    size: 14px;
    weight: bold;
  }
}

// 编译结果
// .font { font-family: Arial; font-size: 14px; font-weight: bold; }

避免过度嵌套

// 差：嵌套过深（超过 3 层）
.page {
  .header {
    .nav {
      .menu {
        .item {
          .link {
            color: blue;
          }
        }
      }
    }
  }
}

// 好：控制在 3 层以内
.nav-link {
  color: blue;
}

嵌套层级建议不超过 3 层，避免选择器优先级过高和编译后代码冗长。

原生 CSS 嵌套

现代浏览器开始支持原生嵌套：

/* 原生 CSS 嵌套（Chrome 120+） */
.card {
  & .title { font-size: 18px; }
  &:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}

要点总结

• 嵌套让样式结构与 HTML 对应，提高可读性
• & 引用父选择器，支持后缀和反向嵌套
• 避免嵌套过深，建议不超过 3 层
• Sass 支持属性嵌套，Less 不支持
• 现代浏览器已支持原生 CSS 嵌套