SASS 是一种 CSS 预处理器，它可以让我们更加高效地编写 CSS 代码。在 SASS 中，我们可以使用 @mixin 和 @extend 来优化我们的代码，使其更加易于维护和扩展。本文将详细介绍如何使用 @mixin 和 @extend 进行代码优化，并提供示例代码以供学习和参考。
@mixin
@mixin 是 SASS 中非常常见的一个指令，它可以帮助我们定义一组 CSS 规则，然后在需要的地方通过 @include 来引用这组规则。这样做的好处在于，我们可以将一些常用的 CSS 规则封装成 @mixin，然后在需要的地方直接调用，避免了重复编写相同的 CSS 代码。
下面是一个示例 @mixin，用于定义一个带有前缀的 transition：
@mixin transition($property, $duration) {
-webkit-transition: $property $duration;
-moz-transition: $property $duration;
-ms-transition: $property $duration;
-o-transition: $property $duration;
transition: $property $duration;
}使用 @mixin 的方式非常简单，只需要在需要使用这组 CSS 规则的地方通过 @include 来引用即可：
.button {
@include transition(all, 0.3s);
}这样就可以为 .button 元素添加一个带有前缀的 transition 效果了。
@extend
@extend 是另一个常见的 SASS 指令，它可以帮助我们复用已有的 CSS 规则。与 @mixin 不同的是，@extend 是通过继承已有的 CSS 规则来实现代码复用的。这样做的好处在于，可以避免重复定义相同的 CSS 规则，从而减少 CSS 文件的大小。
下面是一个示例 @extend，用于定义一个带有圆角的按钮：
-- -------------------- ---- ------- ------- - ------- --- ----- ----- -------- ---- ----- -------------- ---- - --------------- - ------- -------- ----------------- -------- ------ ----- -
在上面的示例中，.primary-button 继承了 .button 的所有 CSS 规则，并添加了自己的 background-color 和 color 属性。这样做的好处在于，可以避免重复定义 .button 中已有的 CSS 规则，从而减少 CSS 文件的大小。
总结
使用 @mixin 和 @extend 是 SASS 中非常常见的代码优化技巧。通过封装常用的 CSS 规则和复用已有的 CSS 规则，可以使代码更加易于维护和扩展。在实际开发中，建议尽可能地使用 @mixin 和 @extend，从而使代码更加优雅和高效。
示例代码：https://codepen.io/anon/pen/OYJzPp
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dbd4d61886fbafa48ba8c3