SASS 中 @extend 与 @mixin 的区别及使用方法介绍-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，CSS 是必不可少的一部分。随着项目的不断壮大，CSS 文件也会变得越来越庞大，维护和修改也变得越来越困难。SASS 是一种 CSS 预处理器，它提供了许多有用的功能，可以大大简化 CSS 开发的工作流程。在 SASS 中，@extend 和 @mixin 是两个重要的功能，本文将介绍它们的区别及使用方法。

@extend

@extend 是一种继承样式的方式，可以让一个选择器继承另一个选择器的样式。这种方式可以避免代码冗余，提高代码的复用性。

语法

// javascriptcn.com 代码示例
// 定义基础样式
.base {
  font-size: 16px;
  color: #333;
}

// 继承基础样式
.extend {
  @extend .base;
  font-weight: bold;
}

示例

// javascriptcn.com 代码示例
// 定义基础样式
.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

// 继承基础样式
.box-large {
  @extend .box;
  width: 200px;
  height: 200px;
}

在上面的示例中，.box-large 继承了 .box 的样式，并对宽度和高度进行了修改，这样就避免了代码的冗余，提高了代码的复用性。

@mixin

@mixin 是一种将样式块封装起来以便复用的方式。它可以接受参数，生成不同的样式。这种方式可以让开发者更加方便地管理样式，提高代码的可维护性。

语法

// javascriptcn.com 代码示例
// 定义 mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// 使用 mixin
.box {
  @include border-radius(10px);
}

示例

// javascriptcn.com 代码示例
// 定义 mixin
@mixin button($bg-color, $color) {
  display: inline-block;
  padding: 10px 20px;
  background-color: $bg-color;
  color: $color;
  border: none;
  border-radius: 3px;
}

// 使用 mixin
.btn-primary {
  @include button(#f00, #fff);
}

.btn-secondary {
  @include button(#00f, #fff);
}

在上面的示例中，我们定义了一个名为 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