在前端开发中，使用 CSS 预处理器可以大大提高开发效率，并更好地组织和管理样式代码。而 SASS 是其中一种比较流行的 CSS 预处理器，并且它支持很多有用的特性，比如变量、嵌套、函数、mixin 等，但在对于大型项目而言，SASS 编译后往往会生成很多冗余的样式，导致页面加载速度变慢。所以，在使用 SASS 的同时，我们需要避免产生多余样式，提高页面的性能和效率。本文将介绍一些避免 SASS 编译后多余样式的技巧。

1. 尽量避免嵌套层级过深

在 SASS 中，可以使用嵌套的方式来组织 CSS 样式。嵌套可以使样式更清晰，易读，也可以方便的管理样式，但是嵌套过深就会产生很多无用的样式，并且加重了 CSS 解析的负担，导致页面渲染变慢。

以下是嵌套层级过深的例子：

// javascriptcn.com 代码示例
.container {
  .row {
    .col {
      .content {
        width: 100%;
      }
    }
  }
}

这里的 .container .row .col .content 将会产生很多冗余的样式，即 .container 也会被嵌套进 .row、.col 和 .content 里，这样的样式对于梳理和维护都是不利的。因此，我们要尽量避免嵌套层级过深，例如：

.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

这样我们就只需要关心 .col 的样式了，这样可以减少解析的负担，避免产生冗余的样式。

2. 利用 @extend 代替嵌套

在 SASS 中，@extend 可以让一个选择器基于另一个选择器生成样式，这种方式可以减少重复的代码。而嵌套的方式会使选择器变得冗长，而且会有很多重复的部分。

例如下面这个例子：

// javascriptcn.com 代码示例
.btn {
  padding: 10px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  border-radius: 5px;
  color: #333;
}

.btn-primary {
  @extend .btn;
  background: #007bff;
  color: #fff;
}

这里 .btn-primary 继承了 .btn 的样式，而不是使用嵌套的方式：

// javascriptcn.com 代码示例
.btn-primary {
  .btn {
    padding: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 5px;
    color: #333;
  }
  background: #007bff;
  color: #fff;
}

这种方式产生的样式也更少，而且更容易维护。

3. 使用占位符选择器

另一种避免产生多余样式的技巧是使用占位符选择器，它们被 SASS 编译后不会作为 CSS 的实际选择器出现。在 SASS 中，占位符选择器使用 % 符号定义。例如：

// javascriptcn.com 代码示例
%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  @extend %clearfix;
}

这里 %clearfix 是一个占位符选择器，.container 继承了 %clearfix 的样式，但它们不会被编译成实际的 CSS 选择器，所以不会产生多余的样式。

总结

使用 SASS 能提高 CSS 的开发效率，而上述三个技巧将使你的样式更易读、更好维护、更少冗余。这些技巧不仅可以优化性能，还有助于保持代码的整洁简单。

示例代码

// javascriptcn.com 代码示例
// 避免嵌套层级过深
.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

// 使用 @extend 代替嵌套
.btn {
  padding: 10px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  border-radius: 5px;
  color: #333;
}

.btn-primary {
  @extend .btn;
  background: #007bff;
  color: #fff;
}

// 使用占位符选择器
%clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.container {
  @extend %clearfix;
}

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