SASS 中如何使用 @mixin 和 @include

SASS 是一种 CSS 预处理器，它允许我们在 CSS 中使用变量、嵌套、函数等高级特性，提高我们的 CSS 编写效率和代码可读性。其中，@mixin 和 @include 是 SASS 中最常用的两个特性之一，本文将详细介绍它们的用法和示例。

@mixin

@mixin 相当于一个函数，它可以带有参数，在 SASS 中定义一个 @mixin 如下：

@mixin mixin-name($arg1, $arg2...) {
  // mixin body
}

其中，mixin-name 是 @mixin 的名称，$arg1, $arg2 是 @mixin 的参数，可以有多个参数。

实际应用中，@mixin 的参数可以是任何 CSS 属性和值，如下：

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

在定义一个 @mixin 之后，我们可以在 SASS 中以如下方式使用它：

.selector {
  @include mixin-name(arg1, arg2...);
}

其中，.selector 是要应用 @mixin 的选择器，mixin-name 是定义的 @mixin 名称，arg1, arg2... 是 @mixin 的参数。

@include

@include 是一个指令，它用于在 CSS 中调用一个 @mixin，用法如下：

@include mixin-name(arg1, arg2...);

其中，mixin-name 是要调用的 @mixin 的名称，arg1, arg2... 是 @mixin 的参数。

示例代码

下面是一个示例代码，使用 @mixin 实现一个简单的按钮样式：

// javascriptcn.com 代码示例
@mixin button($bg-color, $color) {
  background-color: $bg-color;
  color: $color;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}

.primary-button {
  @include button(#3498db, #fff);
}

.secondary-button {
  @include button(#f1c40f, #fff);
}

可以看到，在上面的示例代码中，我们定义了一个 @mixin 名为 button，它包含两个参数 $bg-color, $color。我们通过 @include 调用它并传入不同的参数，实现了两个不同的样式。

在实际开发中，我们可以使用 @mixin 将一些通用属性、动画、布局等组合起来，以提高代码复用率和开发效率。同时，也可以通过 @include 快速调用这些组合。

总结

本文介绍了 SASS 中的两个常用特性 @mixin 和 @include。@mixin 可以看成一个函数，主要用于定义一些通用的 CSS 属性集合，而 @include 则是调用 @mixin 的关键字，可以在 CSS 中快速调用 @mixin 来实现复用。掌握和使用 @mixin 和 @include 可以提高前端开发效率和代码可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65333cef7d4982a6eb6bd826