前言
在前端开发中，CSS 样式表是不可或缺的部分。样式表的编写方式直接关系到页面的渲染效果。而为了提高样式的可维护性和复用性，开发者们倾向于使用 BEM（Block-Element-Modifier）命名规范来编写样式表。而 LESS 可以方便我们编写 BEM 命名规范，本文将详细介绍如何使用 LESS 编写符合 BEM 命名规范的样式。
BEM 简介
BEM 是一种命名规范，它主要基于模块化思想，将样式中的每个元素拆分为三个部分，即块（block）、元素（element）和修饰符（modifier），从而实现样式表的易于管理和重用。
看一个示例，假设我们有一个按钮，我们可以将它拆分为块（block）、元素（element）和修饰符（modifier）：
<button class="btn btn--large btn--primary">点击我</button>
- 块：
.btn - 元素：
.btn__text - 修饰符：
.btn--large和.btn--primary
使用 LESS 编写 BEM 样式
1. 安装 LESS
LESS 是一个 CSS 预处理器，它可以让我们使用类似编程语言的方式来编写 CSS。首先你需要安装 LESS，你可以使用 npm 安装：
npm install less --save-dev
2. BEM 命名规范
LESS 允许我们使用混合（mixins）、变量、嵌套规则等，这使得我们可以更加便捷地编写样式，从而实现更加符合 BEM 命名规范的代码。
首先我们需要为块、元素和修饰符分别定义样式：
-- -------------------- ---- ------- -- - -- ---- - -- --- - -- -- -- ---------- - -- --- - -- --- -- ----------- - -- --- -
接下来，我们可以通过 mixin 和继承来组合块、元素和修饰符。
混合（Mixin）
在 LESS 中，混合指的是一种将样式组合在一起的方法。我们可以使用 .mixin() 函数来定义混合，然后在样式中引入混合。
下面是使用混合来组合块、元素和修饰符的示例：
-- -------------------- ---- -------
-- - --
---- -
------------
-
-- -- --
---------- -
------------------
-
-- ---------------- --
----------- -
-------- -------------
-------- --- -----
---------- -----
------ -----
------- --- ----- -----
------- -
----------------- --------
-
-
----------------- -
------- --
-
-- --- --
----------- -
------------
-------------------
-
------------------ -
---------- -----
-------- ---- -----
-在上面的示例中，我们定义了三个混合函数：.btn-base()、.btn__text-base() 和 .btn--large-base()，分别表示块、元素和修饰符的共同部分。我们可以通过混合将这些共同部分合并起来，然后在样式中引入混合，如 .btn、.btn__text 和 .btn--large。
继承（Extend）
除了混合，我们还可以使用继承来实现 CSS 代码的重用。在 LESS 中，继承使用符号 & 表示。
接下来，我们将上面的代码用继承方式实现：
-- -------------------- ---- -------
-- - --
---- -
------------------ -----
-
-- -- --
---------- -
------------------------ -----
-
-- ------------- --
----------- -
-------- -------------
-------- --- -----
---------- -----
------ -----
------- --- ----- -----
------- -
----------------- --------
-
-
----------------- -
------- --
-
-- --- --
----------- -
------------------ -----
------------------------- -----
-
------------------ -
---------- -----
-------- ---- -----
-在上面的代码中，使用 & 符号来引用父选择器.btn、.btn__text 和 .btn--large 所共有的样式。
3. LESS 变量和嵌套规则
LESS 提供了变量和嵌套规则的支持，使代码更加清晰和易于维护。
下面是一个使用 LESS 变量和嵌套规则的示例：
-- -------------------- ---- -------
-- ---- --
-------------- --------
---------------- -----
--------------------- ---------------------- -----
-- - --
---- -
------------------ -----
----------------- --------------
------ ----------------
------- -
----------------- ---------------------
-
-
-- -- --
---------- -
------------------------ -----
-
-- ------------- --
----------- -
-------- -------------
-------- --- -----
---------- -----
------- --- ----- -----
-
----------------- -
------- --
-
-- --- --
----------- -
------------------ -----
------------------------- -----
-
------------------ -
---------- -----
-------- ---- -----
-在上面的代码中，我们使用了 @btn-bg-color 和 @btn-text-color 这两个样式变量，这样我们在引用这些颜色时只需要使用变量名称即可，便于样式修改和维护。
另外，我们还使用了 .btn:hover 的嵌套规则，这样可以让代码更加清晰易读。
总结
本文介绍了如何使用 LESS 编写符合 BEM 命名规范的样式。通过上面的示例，我们可以看出使用 LESS 可以很方便地编写符合 BEM 命名规范的代码，同时也提高了代码的可维护性和复用性。希望这篇文章能够帮助你更好地使用 LESS 和 BEM 来编写样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659f8c94add4f0e0ff8201d2