学会使用 SASS 的 @extend 和 @include 关键字

在前端开发中，我们经常需要将多个样式应用于不同的元素中，这时候就需要用到 SASS 的 @extend 和 @include 关键字。这两个关键字通过提高样式的复用性，可以简化我们的代码，加快开发速度，提高代码质量。

@extend 关键字

@extend 是 SASS 中的一个重要特性，它可以实现样式继承。通过 @extend，我们可以将一个 CSS 选择器的样式继承到另一个选择器中，从而避免我们重复编写样式代码。

使用方法：

.btn {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
}
  
.btn-primary {
  @extend .btn;
  color: #fff;
  background-color: #007bff;
}
  
.btn-secondary {
  @extend .btn;
  color: #fff;
  background-color: #6c757d;
}

在上面的示例代码中，我们定义了一个 .btn 的公共样式，然后使用 @extend 关键字将它继承到 .btn-primary 和 .btn-secondary 中。这样，我们就避免了重复编写 .btn 的样式代码，提高了代码的可维护性。

需要注意的是，在使用 @extend 时要注意 CSS 样式的继承顺序。样式的继承顺序是从右到左，也就是说，@extend 关键字要写在样式选择器的最右边，例如：.btn-primary {@extend .btn;}

@include 关键字

@extend 是实现样式继承，而 @include 则是实现混合样式的关键字。通过 @include，我们可以将一个 mixin 中的样式应用到一个或多个选择器中。

使用方法：

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
  
.title {
  @include center;
  font-size: 24px;
  font-weight: bold;
}

.content {
  @include center;
  font-size: 16px;
  line-height: 1.5;
}

在上面的示例代码中，我们定义了一个名为 center 的 mixin，它包含了一组样式，用于实现元素的水平垂直居中。然后我们使用 @include 关键字将 mixin 中的样式应用到了两个不同的选择器中，分别是 .title 和 .content。

需要注意的是，在使用 @include 时，可以向 mixin 传递参数，从而实现样式的动态生成。例如：

@mixin size($width, $height) {
  width: $width;
  height: $height;
}
  
.box {
  @include size(200px, 100px);
  background-color: #fafafa;
}

在上面的代码中，我们定义了一个名为 size 的 mixin，它接受两个参数，用于设置元素的宽度和高度。然后我们使用 @include 关键字，向 mixin 传递了两个具体的参数值。

总结

通过学习使用 SASS 的 @extend 和 @include 关键字，可以大大提高代码的复用性和可维护性。同时，熟练掌握这两个关键字，还可以加快代码开发速度，提高工作效率。因此，大家都应该尝试使用 SASS，并且掌握其中的核心特性。

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