介绍
LESS 是一种动态样式语言，它是 CSS 的一种拓展语言，继承了 CSS 的基本语法，而在此基础上增加了变量、Mixin、函数等特性，以帮助前端工程师坚持 DRY（Don't Repeat Yourself）原则。同时，LESS 还提供了类似 SASS 中占位符选择器的特性，即 placeholder selectors。通过能够在项目中使用占位符选择器，而不仅仅是普通的选择器，可以减少代码中的重复代码，使得样式更易于维护。
在本篇文章中，我们将重点介绍在 LESS 中如何使用占位符选择器，并且会提供示例代码。
占位符选择器的定义
占位符选择器是一种特殊类型的选择器，在 SASS 中通过以 “%” 作为前缀来定义。
-- ----------- -- -------------- --------------------- - -------- ----- ---------------- ------- ------------ ------- -
LESS 中占位符选择器的使用
在 LESS 中，则需要通过类似Mixin的方式定义占位符选择器，与SASS不同的是，变量占位符标识符是“@”。
-- -------------- -- -------------- --------------------- - -------- ----- ---------------- ------- ------------ ------- -
使用时，需要通过 & 符号，引用占位符选择器的名称：
-- ---------------
---------- -
--------- -
-------- ---
----------------------
-
-以上代码中使用了占位符选择器.@placeholder-selector 作为混合器，混入到.container::before 中。当然，你也可以将占位符选择器与普通选择器一起混合。
-- ------------------ -------------- - ---------------------- ------ ------ ----------------- -------- -------------- ---- -------- --- ----- -
占位符选择器与Mixin 的区别
虽然在使用方法上，占位符选择器像Mixin，但是两者之间是有区别的：
编译时机
占位符选择器在编译时不会生成任何 CSS 代码，只有在被引用（混入）到普通选择器中时才会生成代码。而Mixin 在定义时会生成 CSS 代码，不论是否被引用，都会生成代码。
多继承
占位符选择器可以实现多继承的功能，可以作为多个选择器的基类，而Mixin 只能实现单继承。
条件混合
Mixin 可以用在 @if 语句中，根据条件混合进入样式表。而占位符选择器不行，它本身不会生成任何 CSS 代码。
总结
在 LESS 中，占位符选择器是一种很方便的工具，可以帮助开发者减少代码量，提高可维护性，同时也可以作为多重样式继承的工具，为工程师提供更多便利。但是占位符选择器与Mixin 之间还是有区别的，开发者选择使用时应该注意这些细节。
示例代码
-- ----------
--------------------- -
-------- -----
---------------- -------
------------ -------
-
-- ------------------
-------------- -
----------------------
------ ------
----------------- --------
-------------- ----
-------- --- -----
-
-- ---------------
---------- -
--------- -
-------- ---
----------------------
-
-参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654336e87d4982a6ebcdb287