SASS 是一种 CSS 预处理器，而 BEM 是一种 CSS 命名规范，二者结合可以提高代码的可维护性和可读性。
一、SASS
SASS 可以让我们更方便地编写 CSS，其最大的特点是可以使用变量、嵌套、混合等功能。例如，我们可以定义一个变量来存储网站的主题色：
$primary-color: #007bff;
.button {
background-color: $primary-color;
color: #fff;
}这里的 $primary-color 就是一个变量，可以在其他地方重复使用，比如在另一个 CSS 类中：
.nav-link {
color: $primary-color;
}此外，SASS 还支持嵌套语法，可以让我们更清晰地表示层级关系：
-- -------------------- ---- -------
----- -
-------- -
------------ ----
-
----- -
-------- -----
----------------- -----
-
-这里的 .heading 和 .body 都是 .card 的子元素，嵌套表示了它们之间的层级关系。
二、BEM
BEM 是一种 CSS 命名规范，其核心思想是将一个组件拆分为块（block）、元素（element）、修饰符（modifier）三个部分。例如，下面是一个按钮组件的 BEM 命名：
<button class="button button--primary"> <span class="button__inner">提交</span> </button>
这里的 button 是一个块，button__inner 是一个元素，button--primary 是一个修饰符。其中，块是组件的最外层容器，元素是块中的子元素，修饰符是用来描述块或元素的某一状态或变体的。
BEM 的优势在于可以明确表示组件之间的依赖关系，以及状态和变体。这样一来，我们就可以更方便地编写样式，而且当有新的需求时，也可以更快地进行修改。
三、SASS 与 BEM 结合
SASS 与 BEM 的结合，可以让我们更方便地编写样式。例如，我们可以使用嵌套语法来表示 BEM 的层级关系：
-- -------------------- ---- -------
------- -
----------------- ---------------
------ -----
-------- -
---------- -------
-
---------- -
----------------- ---------------
-
-这里的 & 符号表示上一级的选择器，我们可以使用它来拼接 BEM 的命名。
同时，SASS 还支持混合语法，可以让我们更方便地重复使用一些样式：
-- -------------------- ---- -------
------ ------------- -
----------------- ---------------
------ -----
-------- -
---------- -------
-
---------- -
----------------- ---------------
-
-
------- -
-------- --------------
-
---------- -
-------- --------------
-这里，我们使用了 @mixin 和 @include 语法，将样式的重复部分抽象成了一个混合，可以在其他地方重复使用。这样一来，当需要修改样式时，只需要修改一处即可。
总结：
SASS 与 BEM 的结合可以帮助我们更方便地编写可维护和可读性更好的代码。使用 SASS 嵌套语法和混合语法可以让我们更方便地编写 BEM 命名，同时可以避免样式重复。如果你想了解更多关于 SASS 和 BEM 的用法，可以看看官方文档，也可以通过实践掌握更多技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5019048841e9894171300