SASS 中如何压缩 CSS 代码

背景

在前端开发中，CSS 代码是其中必不可少的一部分，但是这些代码通常很难维护和处理。为了提高 CSS 的可读性和性能，我们通常需要对其进行压缩。

在 SASS 中，我们可以使用一些方法来压缩我们的 CSS 代码，这不仅可以使得 CSS 代码更加可读性更好，同时也可以提高我们的网站性能。

实践

1. 使用 SASS 的 --style 命令行选项

SASS 提供了一个 --style 命令行选项，可以用来指定输出的 CSS 的格式。在这个命令行选项中，我们可以指定四种不同的格式，分别是：

• nested 嵌套格式，每一个 CSS 规则会被缩进在一行中
• expanded 展开格式，每一个 CSS 规则都在一行中展开
• compact 紧凑格式，每一个 CSS 规则都在一行中，除了嵌套的规则之外
• compressed 压缩格式，所有的 CSS 规则都在一行中，没有任何空格

其中，使用压缩格式可以将 CSS 最小化，并清除所有的空格和注释。这个命令行选项可以在命令行中使用，或者在 Gulp 或 Webpack 的配置文件中配置。

示例代码：

sass main.scss main.min.css --style compressed

2. 使用 SASS 的压缩方法

SASS 还提供了一些内置的压缩方法，这些方法的原理是使用正则表达式来删除不必要的字符和空格，例如：

// 删除注释
@function clean($value) {
   @return 2px; 
}

可以使用以上代码压缩注释。

// 删除所有空格
@function clean($value) {
   @return unquote( replace( str-replace( $value, " ", "" ), "\n", "") );
}

在这个函数中，我们使用了 unquote 函数将所有的引号转义成普通的字符串，然后使用了 replace 函数来删除所有的空格和换行符，最后再使用 str-replace 函数来替换所有的字符串。

总结

压缩 CSS 代码可以大大提高网站的性能，而在 SASS 中，压缩 CSS 代码非常容易。通过使用 --style 命令行选项和 SASS 的压缩方法，我们可以将 CSS 代码压缩得更小，减少页面加载时间，并提高用户体验。

在实际工作中，我们可以根据需要选择不同的压缩方法来优化 CSS 代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c4df6968c7c53b0766972