SASS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时更加方便和高效。但是，SASS 编译出来的 CSS 文件比原始的 CSS 文件要大很多，这对于网站的性能来说是不利的。因此，我们需要将 SASS 编译成 minified CSS，以减小文件大小，提高网站性能。
本文将介绍如何将 SASS 编译成 minified CSS 的正确方法，并提供示例代码。
什么是 minified CSS？
Minified CSS 是指经过压缩处理的 CSS 文件。在压缩过程中，CSS 文件中的空格、换行符、注释等无用字符都被删除，从而减小文件大小。这样可以提高网站的加载速度，减少带宽占用。
如何将 SASS 编译成 minified CSS？
方法一：使用 SASS 命令行工具
SASS 提供了一个命令行工具 sass，可以将 SASS 文件编译成 CSS 文件。使用 sass 命令行工具可以很方便地将 SASS 编译成 minified CSS。
首先，需要安装 SASS 命令行工具。在命令行中执行以下命令：
--- ------- -- ----
安装完成后，进入 SASS 文件所在目录，执行以下命令：
---- ---------- ---------- ------- ----------
其中，input.scss 是要编译的 SASS 文件，output.css 是编译后的 minified CSS 文件，--style compressed 表示编译后的 CSS 文件使用压缩格式。
方法二：使用 Gulp 自动化构建工具
Gulp 是一款自动化构建工具，可以帮助我们自动化地完成各种任务，包括将 SASS 编译成 minified CSS。
首先，需要安装 Gulp。在命令行中执行以下命令：
--- ------- -- ----
安装完成后，进入项目目录，执行以下命令：
--- ------- ---- --------- -------------- ----------
这里安装了三个插件，分别是 gulp、gulp-sass 和 gulp-clean-css。gulp-sass 插件可以将 SASS 文件编译成 CSS 文件，gulp-clean-css 插件可以对 CSS 文件进行压缩。
接下来，创建一个名为 gulpfile.js 的文件，并添加以下代码：
--- ---- - ----------------
--- ---- - ---------------------
--- -------- - --------------------------
----------------- ---------- -
------ ----------------------------
------------------------ ---------------
------------------------------ --------
--------------------------
---
------------------ ---------- -
------------------------------ ----------
---
-------------------- -----------这里定义了两个任务，分别是 sass 和 watch。sass 任务用于将 SASS 文件编译成 minified CSS 文件，并将编译后的文件保存到 css 目录下。watch 任务用于监视 SASS 文件的变化，一旦 SASS 文件发生变化，就自动执行 sass 任务。
在命令行中执行以下命令：
----
这样就可以自动将 SASS 文件编译成 minified CSS 文件了。
总结
将 SASS 编译成 minified CSS 可以提高网站的性能，减少文件大小，加快网站的加载速度。本文介绍了两种方法，一种是使用 SASS 命令行工具，另一种是使用 Gulp 自动化构建工具。无论使用哪种方法，都可以很方便地将 SASS 编译成 minified CSS。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f1031d2b3ccec22f9d6703