前言
在前端开发中，CSS 是必不可少的一部分。随着项目的不断壮大，CSS 文件也会变得越来越庞大，维护和修改也变得越来越困难。SASS 是一种 CSS 预处理器，它提供了许多有用的功能，可以大大简化 CSS 开发的工作流程。在 SASS 中，@extend 和 @mixin 是两个重要的功能，本文将介绍它们的区别及使用方法。
@extend
@extend 是一种继承样式的方式，可以让一个选择器继承另一个选择器的样式。这种方式可以避免代码冗余，提高代码的复用性。
语法
-- -------------------- ---- ------- -- ------ ----- - ---------- ----- ------ ----- - -- ------ ------- - ------- ------ ------------ ----- -
示例
-- -------------------- ---- ------- -- ------ ---- - ------ ------ ------- ------ ----------------- ----- - -- ------ ---------- - ------- ----- ------ ------ ------- ------ -
在上面的示例中，.box-large 继承了 .box 的样式，并对宽度和高度进行了修改，这样就避免了代码的冗余，提高了代码的复用性。
@mixin
@mixin 是一种将样式块封装起来以便复用的方式。它可以接受参数，生成不同的样式。这种方式可以让开发者更加方便地管理样式，提高代码的可维护性。
语法
-- -------------------- ---- ------- -- -- ----- ------ ---------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - -- -- ----- ---- - -------- -------------------- -
示例
-- -------------------- ---- ------- -- -- ----- ------ ----------------- ------- - -------- ------------- -------- ---- ----- ----------------- ---------- ------ ------- ------- ----- -------------- ---- - -- -- ----- ------------ - -------- ------------ ------ - -------------- - -------- ------------ ------ -
在上面的示例中，我们定义了一个名为 button 的 mixin，它接受两个参数：$bg-color 和 $color。使用 @include 关键字可以引入 mixin，并传入参数。这样就可以生成不同的样式，提高代码的可维护性。
区别
@extend 和 @mixin 都可以提高代码的复用性，但两者还是有一些区别。
- @extend 可以继承另一个选择器的样式，但只能继承一个选择器的样式；
- @mixin 可以封装样式块并接受参数，生成不同的样式；
- @extend 会生成新的选择器，而 @mixin 不会生成新的选择器；
- @mixin 可以被多次调用，而 @extend 只能被调用一次。
总结
在 SASS 中，@extend 和 @mixin 都是非常有用的功能，可以提高代码的复用性和可维护性。@extend 可以继承另一个选择器的样式，@mixin 可以封装样式块并接受参数，生成不同的样式。在实际开发中，我们可以根据具体的需求选择合适的方式来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6583ccf8d2f5e1655de9811c