Sass @include

@include 的基本概念

@include 是 Sass 中一个非常实用的指令。它允许你将一组预定义的样式或属性复用到多个选择器上。通过这种方式，你可以避免代码重复，提高代码的可维护性和可读性。

如何使用 @include

@include 的基本用法是在一个选择器中调用一个已经定义好的 mixin。例如，如果你有一个名为 border-radius 的 mixin，你可以这样使用它：

.button {
  @include border-radius(5px);
}

上述代码会被编译成以下 CSS：

.button {
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

定义 mixin

要让 @include 起作用，你需要首先定义一个 mixin。mixins 允许你封装一段 CSS 代码，然后可以在任何地方调用它。例如：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

在这个例子中，我们定义了一个名为 border-radius 的 mixin，它可以接受一个参数 $radius 来设置边框圆角的半径。

包含默认值

mixins 可以包含默认值，这使得它们更加灵活。例如：

// www.javascriptcn.com code example
@mixin font($size: 14px, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

.headline {
  @include font(20px, bold);
}

.paragraph {
  @include font;
}

这段代码会被编译为：

// www.javascriptcn.com code example
.headline {
  font-size: 20px;
  font-weight: bold;
}

.paragraph {
  font-size: 14px;
  font-weight: normal;
}

这里，font mixin 接受两个参数：$size 和 $weight，并且它们都有默认值。在 .headline 类中，我们显式地设置了 $size 和 $weight 的值；而在 .paragraph 类中，我们没有提供任何参数，因此它们会使用 mixin 中定义的默认值。

使用多个 mixin

你也可以在一个选择器中多次使用同一个 mixin 或者多个不同的 mixin。例如：

// www.javascriptcn.com code example
@mixin padding($padding) {
  padding: $padding;
}

@mixin margin($margin) {
  margin: $margin;
}

.box {
  @include padding(10px);
  @include margin(20px);
}

编译后的 CSS 将是：

.box {
  padding: 10px;
  margin: 20px;
}

@content 关键字

除了简单的参数传递，Sass 还提供了一种更强大的方式来扩展和修改 mixin 的行为——@content 关键字。它允许你在 mixin 内部嵌套内容，并在调用时替换这些内容。

// www.javascriptcn.com code example
@mixin button-style($color) {
  background-color: $color;
  @content; // 这里是 @content 关键字
}

.button-primary {
  @include button-style(blue) {
    color: white;
  }
}

.button-secondary {
  @include button-style(green) {
    color: black;
  }
}

编译后：

// www.javascriptcn.com code example
.button-primary {
  background-color: blue;
  color: white;
}

.button-secondary {
  background-color: green;
  color: black;
}

在这个例子中，@content 关键字被用来插入每个类各自特有的部分，如颜色。这种方式使 mixin 更具灵活性和可定制性。

总结

@include 是 Sass 中一个非常有用的工具，它允许你重用 CSS 代码，从而减少重复并提高项目的可维护性。通过定义和使用 mixin，你可以创建灵活且功能丰富的样式系统，而 @content 关键字则进一步增强了 mixin 的功能，使其能够适应更多复杂的需求场景。掌握好 @include 的使用方法，将大大提高你的前端开发效率。