SASS 中的选择器 - nesting 技巧详解

SASS 是一种 CSS 预处理器，它为 CSS 提供了更加强大、灵活和易于维护的语言。SASS 中的选择器 nesting 技巧是一种非常实用的技巧，可以帮助我们更加高效地编写 CSS。

什么是选择器 nesting

选择器 nesting 是指在 CSS 样式表中，通过在父级选择器前添加子级选择器来表示嵌套结构，从而简化选择器的书写。

举个例子，假设我们的 HTML 结构如下：

<div class="container">
  <div class="header">
    <h1>Title</h1>
  </div>
  <div class="content">
    <p>Content</p>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>
</div>

如果我们要为其中的标题添加样式，传统的 CSS 写法可能是这样：

.container .header h1 {
  font-size: 32px;
  font-weight: bold;
}

而使用选择器 nesting 技巧，代码可以简化为：

.container {
  .header {
    h1 {
      font-size: 32px;
      font-weight: bold;
    }
  }
}

可以看到，选择器 nesting 可以使得我们的代码更加易读、易维护。

常见的选择器 nesting 技巧

& 符号

SASS 中，& 符号用于表示父选择器的占位符。通过 & 符号，在子选择器中可以引用父选择器，从而简化代码。

举个例子，如果我们想为 hover 状态下的链接添加样式，传统的 CSS 写法可能是这样：

a:hover {
  color: red;
}

a:focus {
  color: blue;
}

而使用选择器 nesting 技巧，代码可以简化为：

a {
  &:hover, &:focus {
    color: red;
  }
}

这里 & 符号表示当前选择器的父级选择器，即 a。

> 符号

CSS 中的 > 符号表示子选择器，它只会匹配当前元素的直接子元素。在 SASS 中，选择器 nesting 技巧可以使得 > 符号的书写变得更加灵活。

举个例子，如果我们要为列表中的子项添加样式，传统的 CSS 写法可能是这样：

ul li {
  margin-left: 10px;
}

ul li a {
  color: blue;
}

而使用选择器 nesting 技巧，代码可以简化为：

ul {
  li {
    margin-left: 10px;

    a {
      color: blue;
    }
  }
}

可以看到，选择器 nesting 技巧让代码更加清晰易读。

总结

选择器 nesting 是 SASS 中的一个非常实用的技巧，它可以使得 CSS 代码更加易读、易维护。我们可以使用 & 符号来引用父选择器，使用 > 符号表示子选择器，从而简化代码。在实际的开发工作中，我们可以充分利用选择器 nesting 技巧，提高开发效率，减少代码冗余。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a0943badd4f0e0ff8d9163