SASS 是一种强大的 CSS 预处理器，使用它可以让前端开发变得更加高效。其中一个重要的功能就是处理重复的样式代码，我们可以使用 SASS 提供的 mixin 和 extend 这两个功能来实现。
Mixin
Mixin 是一种将一组样式代码定义为一个函数的方法，可以将这个函数的定义和调用分开，使得代码更加易读和易于维护。我们可以通过 @mixin 关键字来定义一个 mixin：
-- -------------------- ---- ------- ------ ------ - -------- ------------- -------- ---- ----- ---------- ----- ------------ ----- ----------- ------- ---------------- ----- ------ -------- ----------------- -------- ------- ----- -------------- ---- ------- -------- -
在上面的例子中，我们定义了一个名为 button 的 mixin，它包含了一个按钮的样式。现在我们可以在任何需要按钮样式的地方使用 @include 指令来调用这个 mixin：
.btn-primary {
@include button;
}
.btn-danger {
@include button;
background-color: #dc3545;
}在上面的例子中，我们分别定义了 .btn-primary 和 .btn-danger 两个类，它们分别使用了 button mixin 来定义样式。这样的话，我们就可以在任何需要按钮样式的地方，只需要使用 @include 指令来调用这个 mixin 即可。
Extend
Extend 是一种将一个选择器继承到另一个选择器的方法，可以避免重复的样式代码。我们可以通过 @extend 关键字来引用一个已经定义好的选择器：
-- -------------------- ---- ------- ----- - -------- ------ ----------- - - ---- ------- -- -- ----- -------------- ---- -------- ----- - ------------- - ------- ------ ------- --- ----- -------- - ------------ - ------- ------ ------- --- ----- -------- -
在上面的例子中，我们分别定义了 .card、.primary-card 和 .danger-card 三个类，其中 .primary-card 和 .danger-card 都继承了 .card 类的样式。这样的话，我们就可以避免重复的样式代码，并且在需要修改样式的时候也更加方便。
总结
使用 SASS 处理重复的样式代码可以让前端开发变得更加高效。在上面的文章中，我们介绍了两个常用的方法：mixin 和 extend。使用这两个方法，我们可以让代码更加易读、易于维护，并且避免重复的样式代码。在实际项目中，我们应该根据不同的需求，选择最合适的方法来处理样式代码，让代码更加高效和健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644fa47a980a9b385b905783