常用的 SASS 混合的使用方法和优化-JavaScript中文网-JavaScript教程资源分享门户

SASS 是一个基于 CSS 的预处理器，可以扩展 CSS，增加可读性和可维护性。SASS 提供了一种叫做混合（Mixins）的方法，可以在 CSS 规则中重复使用代码。本文将介绍常用的 SASS 混合的使用方法和优化。

使用混合

混合使用 @mixin 声明，例如：

// javascriptcn.com 代码示例
@mixin transform($property) {
  -webkit-transform: $property;
  -moz-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

上面例子中，通过 @mixin 声明了一个 transform 混合，并在 .box 中使用了这个混合。编译后的 CSS 代码如下：

.box {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

通过混合的方式，可以把重复的 CSS 代码抽象出来，提高代码的可读性和可维护性。当需要修改这个样式时，只需要修改一处即可。

传参

混合可以接受参数。参数使用 $ 符号声明。例如：

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

.box {
  @include size(100px, 200px);
}

上面例子中，通过 size 混合传递了 100px 和 200px 两个参数。编译后的 CSS 代码如下：

.box {
  width: 100px;
  height: 200px;
}

传参可以让混合更加灵活。

默认值

混合可以设置默认值，例如：

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

.box {
  @include size;
}

上面例子中，可以不传递任何参数，使用默认值 100px 和 200px。编译后的 CSS 代码如下：

.box {
  width: 100px;
  height: 200px;
}

设置默认值可以让代码更加简洁。

继承

混合可以继承已有的样式。使用 @extend 声明，例如：

.error {
  color: red;
}

.alert {
  @extend .error;
  border: 1px solid red;
}

上面例子中，使用 @extend 继承了 .error 样式，并添加了 border 样式。编译后的 CSS 代码如下：

.error,
.alert {
  color: red;
}

.alert {
  border: 1px solid red;
}

使用继承可以减少代码量和重复定义的样式。

优化

SASS 混合的使用可以提高代码的可读性和可维护性，但如果混合过多，会导致编译后的 CSS 文件过大。可以通过以下优化来减小 CSS 文件大小。

避免混合的滥用

尽量不要把所有样式都写成混合，只在需要重复使用的样式上使用混合。如果一个样式只用到了一次，不需要写成混合。

合并相似的混合

如果相似的混合只有部分不同，可以把相同的部分抽象出来，写成一个共用的混合。例如：

// javascriptcn.com 代码示例
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

.box1 {
  @include size(100px, 200px);
}

.box2 {
  @include size(200px, 200px);
}

可以合并成：

// javascriptcn.com 代码示例
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

.box1 {
  @include size(100px, 200px);
}

.box2 {
  @include size(200px, 200px);
}

结构化书写

混合使用时，尽量按照结构化书写，可以提高代码的可读性。例如：

// javascriptcn.com 代码示例
@mixin size($width, $height) {
  width: $width;
  height: $height;
}

.box {
  @include size(100px, 200px);
  border: 1px solid red;

  .inner {
    @include size(50px, 50px);
    background-color: blue;
  }
}

结构化书写可以让代码更加清晰。

总结

通过 SASS 混合，我们可以把重复的代码抽象出来，提高代码的可读性和可维护性。在使用混合时，需要注意混合的优化，避免滥用混合和尽量合并相似的混合，结构化书写，可以让代码更加简洁明了。

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