SASS 中 @mixin 与 @include 的用法详解！
SASS 是一种优秀的 CSS 预处理器，它提供了很多强大的语法和工具，能够大幅度提升前端开发效率。其中，@mixin 与 @include 是 SASS 中非常重要的两个语法。通过 @mixin，我们可以定义复用的、可配置的代码块；而通过 @include，我们可以方便地引用这些代码块。本文将详细介绍 SASS 中 @mixin 与 @include 的用法，并通过示例代码来帮助读者更好地理解。
@mixin 的基本语法
@mixin 的基本用法如下：
@mixin mixinName($param1, $param2, ...) {
// 具体的代码块
}其中，mixinName 为 mixin 的名称，$param1, $param2, ... 为 mixin 的参数，而具体的代码块则是 mixin 的主体内容。
例如，我们可以定义一个 mixin，用于生成圆角矩形：
@mixin roundRect($width, $height, $radius: 10px) {
width: $width;
height: $height;
border-radius: $radius;
}这个 mixin 接受三个参数：$width 和 $height 用于指定矩形的宽度和高度，$radius 用于指定矩形的圆角半径（默认为 10px）。在具体的代码块中，我们使用了 CSS 的 border-radius 属性来生成圆角矩形。
@include 的基本语法
@include 的基本用法如下：
.selector {
@include mixinName($param1, $param2, ...);
}其中，.selector 是要应用 mixin 的选择器，mixinName 为要引用的 mixin 名称，$param1, $param2, ... 为要传递给 mixin 的参数。在具体的代码块中，我们使用了 CSS 的 border-radius 属性来生成圆角矩形。
例如，我们可以使用刚刚定义的 roundRect mixin 来生成一个宽为 200px、高为 100px、圆角半径为 20px 的圆角矩形：
.round {
@include roundRect(200px, 100px, 20px);
}这里我们使用了 .round 选择器来应用 mixin。在 @include 中，我们传递了三个参数，分别是 200px、100px 和 20px，用于指定矩形的宽度、高度和圆角半径。
@mixin 进阶用法
除了基本用法，@mixin 还有一些进阶用法，例如：
- @content 指令
@content 指令可以用来定义 mixin 的内容占位符，并可以在调用 mixin 时传递具体的内容。例如：
-- -------------------- ---- -------
------ --------------- -
------- --- ----- -----
----------------- -----
-------- -----
-------- -
-------- ---------
-
---------
-
-------------- -
-------- ------------- -
----------------- ------
------ ------
-
-
-------------- -
-------- ------------- -
----------------- -------
------ ----
-
-在这个例子中，我们定义了一个 alert mixin，用于生成通知框。在 mixin 的主体内容中，我们使用了 &:before 来生成通知框的内容。同时，我们使用了 @content 指令来定义 mixin 的内容占位符，以便后续调用时传递具体的样式。
我们可以在 alert mixin 的调用中，使用大括号来传递具体的样式，这些样式会替换掉 @content 占位符中的内容。例如，我们可以通过 @include alert('操作成功') 来生成一个成功提示框，并设置它的背景颜色为绿色，文字颜色为白色。
- 多重参数
@mixin 还支持传递多个参数，以满足更复杂的需求。例如：
-- -------------------- ---- ------- ------ ---------- --- ------ ------- - ----------- -- -- ----- ------- - --------- - -------- --------- -- ----- ------- -- -- ------ - --------- - -------- --------- -- ----- ------- -- -- ------ -
在这个例子中，我们定义了一个 shadow mixin，用于生成阴影效果。我们使用了四个参数，分别为 $x、$y、$blur 和 $color，分别用于指定阴影的水平偏移量、垂直偏移量、模糊半径和颜色值。
我们可以使用 @include 来应用 shadow mixin，并传递对应的参数。例如，我们可以通过 @include shadow(0, 0, 10px, rgba(0, 0, 0, 0.3)) 来生成一组阴影效果，其中水平和垂直偏移量为 0，模糊半径为 10px，颜色值为 rgba(0, 0, 0, 0.3)。
总结
@mixin 和 @include 是 SASS 中非常重要的语法，能够大幅度提升前端开发效率。通过定义 mixin，我们可以将重复的代码块拆分成可重用的模块；而通过引用 mixin，我们可以方便地调用这些代码块，并传递具体的参数。在实际的开发中，我们可以结合 @content 指令、多重参数等进阶技巧，来满足更复杂的需求。希望本文能够帮助读者更好地掌握 @mixin 和 @include 的用法，并在实践中得到运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646187a5968c7c53b02e6be2