SASS 是一个基于 CSS 的预处理器，可以扩展 CSS，增加可读性和可维护性。SASS 提供了一种叫做混合（Mixins）的方法，可以在 CSS 规则中重复使用代码。本文将介绍常用的 SASS 混合的使用方法和优化。
使用混合
混合使用 @mixin 声明，例如：
------ -------------------- - ------------------ ---------- --------------- ---------- -------------- ---------- ---------- ---------- - ---- - -------- ------------------------- -
上面例子中，通过 @mixin 声明了一个 transform 混合，并在 .box 中使用了这个混合。编译后的 CSS 代码如下：
---- - ------------------ -------------- --------------- -------------- -------------- -------------- ---------- -------------- -
通过混合的方式，可以把重复的 CSS 代码抽象出来，提高代码的可读性和可维护性。当需要修改这个样式时，只需要修改一处即可。
传参
混合可以接受参数。参数使用 $ 符号声明。例如：
------ ------------ -------- - ------ ------- ------- -------- - ---- - -------- ----------- ------- -
上面例子中，通过 size 混合传递了 100px 和 200px 两个参数。编译后的 CSS 代码如下：
---- - ------ ------ ------- ------ -
传参可以让混合更加灵活。
默认值
混合可以设置默认值，例如：
------ ------------ ------ -------- ------ - ------ ------- ------- -------- - ---- - -------- ----- -
上面例子中，可以不传递任何参数，使用默认值 100px 和 200px。编译后的 CSS 代码如下：
---- - ------ ------ ------- ------ -
设置默认值可以让代码更加简洁。
继承
混合可以继承已有的样式。使用 @extend 声明，例如：
------ - ------ ---- - ------ - ------- ------- ------- --- ----- ---- -
上面例子中，使用 @extend 继承了 .error 样式，并添加了 border 样式。编译后的 CSS 代码如下：
------- ------ - ------ ---- - ------ - ------- --- ----- ---- -
使用继承可以减少代码量和重复定义的样式。
优化
SASS 混合的使用可以提高代码的可读性和可维护性，但如果混合过多，会导致编译后的 CSS 文件过大。可以通过以下优化来减小 CSS 文件大小。
避免混合的滥用
尽量不要把所有样式都写成混合，只在需要重复使用的样式上使用混合。如果一个样式只用到了一次，不需要写成混合。
合并相似的混合
如果相似的混合只有部分不同，可以把相同的部分抽象出来，写成一个共用的混合。例如：
------ ------------ -------- - ------ ------- ------- -------- - ----- - -------- ----------- ------- - ----- - -------- ----------- ------- -
可以合并成：
------ ------------ -------- - ------ ------- ------- -------- - ----- - -------- ----------- ------- - ----- - -------- ----------- ------- -
结构化书写
混合使用时，尽量按照结构化书写，可以提高代码的可读性。例如：
------ ------------ -------- -
------ -------
------- --------
-
---- -
-------- ----------- -------
------- --- ----- ----
------ -
-------- ---------- ------
----------------- -----
-
-结构化书写可以让代码更加清晰。
总结
通过 SASS 混合，我们可以把重复的代码抽象出来，提高代码的可读性和可维护性。在使用混合时，需要注意混合的优化，避免滥用混合和尽量合并相似的混合，结构化书写，可以让代码更加简洁明了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654035be7d4982a6eb9b8f19