一、简介

Sass 的嵌套功能允许您以更直观、更结构化的方式编写 CSS，反映 HTML 的层次结构，使代码更易读和维护。

1、基本嵌套

在 Sass 中，您可以使用选择器嵌套来定义样式。这意味着您可以在一个选择器内部定义另一个选择器，从而减少重复代码。

nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

编译后：

nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}

这使得您可以更轻松地组织和管理样式，特别是对于复杂的样式表。

2、父选择器引用&

您可以使用 & 符号来引用父选择器，这在某些情况下非常有用。例如，当您希望为伪类添加样式时：

article a {
  color: blue;
  $:hover {
    color: red;
  }
}

编译后：

article a {
  color: blue;
}
article a:hover {
  color: red;
}

3、属性嵌套

Sass 还允许您在属性中嵌套选择器，这对于某些特定的属性非常有用。例如，您可以在 border 属性中嵌套 border-style、border-color 和 border-style：

.box {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

编译后：

.box {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

嵌套属性的规则

把属性名从中划线 - 的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像 css 选择器嵌套一样，sass 会把你的子属性一一解开，把根属性和子属性部分通过中划线 - 连接起来，最后生成的效果与你手动一遍遍写的 css 样式一样：

4、群组选择器嵌套

您可以在一个选择器中嵌套多个选择器，以减少重复代码：

nav,
article {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}

编译后：

nav ul,
article ul {
  margin: 0;
}
nav ul li,
article ul li {
  display: inline-block;
}

5、组合选择器和同层组合选择器：>、 + 和 ~

Sass 还提供了一些子组合选择器和同层组合选择器，这些选择器可以帮助您更精确地选择元素。

该属性表现与css原生选择器用法一致。

1. 父子组合选择器>

子组合选择器 > 表示选择器的直接子元素。例如：

selection-1 > selection-2 {
  margin: 0;
}

以上代码意思为：选中所有父级是 selection-1 元素的 selection-2 元素。 二者具有直接的父子关系。

2. 同层组合选择器+

同层组合选择器 + 表示指定选择器的相邻兄弟元素。例如：

selection-1 + selection-2 {
  color: red;
}

以上代码意思为：选中所有 selection-1 元素后面紧邻的selection-2 元素，二者必须相邻且同层。

3. 同层组合选择器~

同层组合选择器 ~ 表示指定选择器的所有兄弟元素。例如：

selection-1 ~ selection-2 {
  color: red;
}

以上代码意思为：选中所有的 selection-1 元素后面跟着的所有 selection-2 元素。二者无论隔了多少元素，保证同级别即可。

二、限制点

虽然 Sass 的嵌套功能非常强大，但也有一些限制。例如，您不能在属性值中嵌套选择器，也不能在伪类中嵌套选择器。

1、不能在属性值中直接嵌套选择器

.example {
  background: {
    image: {
      .icon {
        // 这是无效的！
        path: url("icon.png");
      }
    }
  }
} // 报错

替代方案： 使用变量或 mixin 代替

$icon-path: url("icon.png");

.example {
  background-image: $icon-path;
}

2、不能在伪类的属性中嵌套选择器

错误示例：

a {
  :hover {
    // 错误！会生成 `a :hover`（中间有空格）
    color: red;
  }
}

正确做法： 必须使用 & 父选择器引用：

a {
  &:hover {
    // 生成正确的 `a:hover`
    color: red;
  }
}

三、总结

Sass 的嵌套功能使您能够更轻松地编写和维护 CSS，特别是对于复杂的样式表。它提供了一种更直观、更结构化的方式来组织样式，使代码更易读和维护。

优点：

• 代码结构更清晰
• 减少重复代码
• 更接近 HTML 结构
• 方便维护和修改

缺点：

• 过度嵌套会导致 CSS 选择器过于具体
• 可能生成冗余的 CSS
• 过度使用可能导致性能问题

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24