在前端开发中，CSS 的选择器是非常重要的一部分。它可以帮助我们精确地定位元素并对其进行样式控制。但有时候，我们需要更复杂的选择器来满足我们的需求。这时，SASS 就可以帮助我们扩展 CSS 选择器。
SASS 简介
SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它可以让我们使用类似编程语言的方式来写 CSS。SASS 代码可以通过编译器转换为普通的 CSS 代码，然后在浏览器中使用。
SASS 提供了很多功能，包括变量、嵌套、混合、继承等等。这些功能可以帮助我们更快速、更方便地编写 CSS 代码。
扩展 CSS 选择器
在 CSS 中，选择器是用来定位元素的。例如，我们可以使用以下选择器来选中所有的段落元素：
- - ------ ---- -
但是，有时候我们需要更复杂的选择器来选中特定的元素。例如，我们可能想要选中所有 class 为 .container 的 div 元素中的所有段落元素。在 CSS 中，我们可以这样写：
---------- - - ------ ---- -
但是，如果我们有很多这样的选择器，代码会变得非常冗长。这时，SASS 就可以帮助我们简化代码。
嵌套选择器
SASS 允许我们在选择器中嵌套其他选择器。例如，我们可以这样写：
---------- -
- -
------ ----
-
-这段代码与上面的 CSS 代码是等价的。但是，使用 SASS 嵌套选择器可以让代码更加清晰和易于维护。
父选择器
在 SASS 中，我们可以使用 & 符号来引用父选择器。例如，我们可以这样写：
---------- -
-------- -
----------------- -----
-
-这段代码会将 .container.active 的背景色设置为蓝色。在这里，& 符号引用了父选择器 .container。
子组合选择器
在 SASS 中，我们可以使用 > 符号来表示子组合选择器。例如，我们可以这样写：
---------- -
- - -
------ ----
-
-这段代码会将 .container 中的所有直接子元素中的段落元素的颜色设置为红色。
后代组合选择器
在 SASS 中，我们可以使用空格符来表示后代组合选择器。例如，我们可以这样写：
---------- -
- -
------ ----
-
-这段代码会将 .container 中的所有后代元素中的段落元素的颜色设置为红色。
通用选择器
在 SASS 中，我们可以使用 * 符号来表示通用选择器。例如，我们可以这样写：
---------- -
- - -
------- --
-------- --
-
-这段代码会将 .container 中的所有直接子元素的 margin 和 padding 都设置为 0。
总结
通过 SASS，我们可以使用嵌套选择器、父选择器、子组合选择器、后代组合选择器和通用选择器来扩展 CSS 选择器。这些功能可以帮助我们更快速、更方便地编写 CSS 代码，同时也使代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66812962dc1ed1a61b0f1979