前言
在前端开发中，我们经常需要使用 CSS 来控制页面的样式。但是，当我们需要对某些样式进行复用时，这时候就需要用到 SASS 中的 "@mixin" 和 "@include" 了。
"@mixin" 的使用
"@mixin" 可以将一组属性和值封装起来，以便在需要的时候进行调用。下面是一个使用 "@mixin" 的示例：
-- -------------------- ---- ------- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------- -------------------- -
在上面的代码中，我们定义了一个 "@mixin"，名称为 "border-radius"，它接受一个参数 $radius。"@mixin" 中包含了三个属性和值，分别是 "-webkit-border-radius"、"-moz-border-radius" 和 "border-radius"。在 ".box" 类中，我们使用 "@include" 来调用 "border-radius" "@mixin"，并将参数设置为 "10px"。
这样，在编译后，".box" 类的样式就会被设置为：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}"@include" 的使用
"@include" 是用来调用 "@mixin" 的，它可以将 "@mixin" 中的属性和值应用到当前的选择器中。下面是一个使用 "@include" 的示例：
-- -------------------- ---- ------- ------ ----------------- ------------ - ----------------- ---------- ------ ------------ -------- ---- ----- ------- ----- -------------- ---- ------- -------- - ------------ - -------- --------------- ------ - -------------- - -------- --------------- ------ -
在上面的代码中，我们定义了一个 "@mixin"，名称为 "button"，它接受两个参数 $bg-color 和 $text-color。"@mixin" 中包含了五个属性和值。在 ".btn-primary" 类中，我们使用 "@include" 来调用 "button" "@mixin"，并将参数设置为 "#007bff" 和 "#fff"。同样的，在 ".btn-secondary" 类中，我们使用 "@include" 来调用 "button" "@mixin"，并将参数设置为 "#6c757d" 和 "#fff"。
这样，在编译后，".btn-primary" 类的样式就会被设置为：
.btn-primary {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}".btn-secondary" 类的样式就会被设置为：
.btn-secondary {
background-color: #6c757d;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}总结
在本文中，我们介绍了如何在 SASS 中使用 "@mixin" 和 "@include"。"@mixin" 可以将一组属性和值封装起来，以便在需要的时候进行调用；"@include" 是用来调用 "@mixin" 的，它可以将 "@mixin" 中的属性和值应用到当前的选择器中。通过使用这两个功能，我们可以更加方便地进行样式的复用，提高代码的重用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66052051d10417a2222b8461