LESS 是一种基于 CSS 的动态样式语言，通过使用变量、函数、运算符和混合等特性，提升了 CSS 的可维护性和灵活性。其中一个关键特性是 LESS 提供了更加强大的选择器，本文将介绍如何使用 LESS 改进 CSS 选择器。
问题
CSS 的选择器不够灵活，只能基于 DOM 结构和简单的属性匹配来选择元素。这使得在某些场景下，我们需要几个不同的选择器来修改一个元素的样式。
比如，我们想要给页面中的所有 <a> 标签添加一个下划线，并且对于 hover 状态下的链接取消下划线并添加一个渐变效果。在 CSS 中，我们需要使用以下代码：
a {
text-decoration: underline;
}
a:hover {
text-decoration: none;
background-image: linear-gradient(to bottom, #00FF00, #00FFFF);
}这段代码不能达到我们的预期效果，因为它同样会给父元素包含的子元素都应用相同的样式。如果你在父元素中同时有 <div> 和 <a> 标签，那么所有的 <a> 都会应用这段样式。
解决方案
如果使用 LESS，我们可以通过嵌套选择器来避免这个问题。将 <a> 标签的样式定义在一个父元素选择器下，并使用 & 代替其父元素的名称，如下：
-- -------------------- ---- -------
----- -
- -
---------------- ----------
------- -
---------------- -----
----------------- ------------------ ------- -------- ---------
-
-
-上述代码会生成以下 CSS：
.link a {
text-decoration: underline;
}
.link a:hover {
text-decoration: none;
background-image: linear-gradient(to bottom, #00FF00, #00FFFF);
}在这个例子中，我们将 <a> 标签的样式放在了 .link 选择器下，并使用 & 指代了 .link。这样做的优点是我们只需要一个选择器来描述一个元素的样式，避免了选择器重复的问题。
混合器 Mixins
除了嵌套选择器外，LESS 还提供了混合器（Mixins）这一强大特性。它类似于函数，可以带有一些参数，返回带有相应样式的 CSS 代码。
-- -------------------- ---- ------- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - --------------- -- --- -- ------ ---- ------- --------------- - ------------------- -- -- ----- ------- ---------------- -- -- ----- ------- ----------- -- -- ----- ------- -
在这个示例中，我们定义了两个混合器： border-radius 和 box-shadow。它们可以接受一些参数，并返回带有相应样式的 CSS 代码。使用混合器非常简单：
.border-box {
border-radius: 5px;
.box-shadow(0, 0, 5px, #999);
}上述代码实现了 <div> 元素的圆角和阴影效果。我们可以看到，调用混合器非常容易，只需要像调用函数一样传递参数即可。
继承和占位符
LESS 还提供了继承和占位符两个功能，它们可以大大增强样式的复用性和可维护性。
继承
继承是一种特殊的混合器，它使用 CSS 的选择器语法来实现样式的继承。在 LESS 中，我们可以使用 :extend 语法实现继承：
-- -------------------- ---- ------- ------ - ------ ---- ------------ ----- - -------- - ----------------- ------ ------- -
上述代码中，我们定义了一个 .error 选择器，并给它设置了颜色和字体加粗样式。接着，我们定义了一个 .warning 选择器，通过 :extend 语法将 .error 选择器的样式继承到 .warning 选择器中。同时，我们还为 .warning 选择器设置了一个黄色的颜色。
对于继承，我们需要注意以下几点：
- 必须使用
:extend语法进行继承，不能使用普通的混合器语法； - 被继承的选择器不能拥有参数；
- 选择器只能继承一个父选择器的样式，无法继承多个。
占位符
占位符是一种更加高效的继承方式。它定义了一个可重用的样式类，但不同于普通的类选择器，定义了占位符的选择器不会出现在编译出来的 CSS 文件中。
-- -------------------- ---- -------
--------- -
----- --
------- -
-------- ---
-------- ------
------ -----
-
-
---------- -
--------------------
---
-上述代码中，我们定义了一个 %clearfix 的占位符，设置了清除浮动用的样式，并在 .container 选择器中通过 :extend 语法继承了这个占位符。
占位符的优点在于：
- 可以避免重复和遗漏类选择器；
- 可以将样式组织在占位符中，方便复用。
总结
通过 LESS 对选择器的增强、混合器的使用、继承和占位符的功能，我们可以大大提高 CSS 的可维护性和灵活性。在实际开发中，我们可以结合具体的场景，运用这些特性，使样式更加高效、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b2a76968c7c53b0a95336