一次运行多个 Sass 文件 - Shell/Bash

在项目中经常需要编译多个 Sass 文件，手动一个一个运行 sass 命令会很繁琐且浪费时间，因此我们可以使用 Shell/Bash 脚本来简化编译流程，本文将介绍如何一次运行多个 Sass 文件。

我们假设有如下的目录结构：

sass/
-- a.scss
-- b.scss
-- c.scss
-- variables.scss
css/

其中，sass/ 目录存放 Sass 文件，css/ 目录存放生成的 CSS 文件。

思路

我们需要循环遍历 sass/ 目录下的所有 Sass 文件，并对每个 Sass 文件执行 sass 命令进行编译。可以使用 Shell/Bash 中的 for 循环结合 sass 命令实现。

实现

打开终端，进入项目根目录，创建一个 compile.sh 文件。

touch compile.sh

使用文本编辑器打开 compile.sh 文件，输入以下代码。

#!/bin/bash

# 遍历 sass/ 目录下的所有 Sass 文件
for file in sass/*.scss
do
  # 对每个 Sass 文件执行 sass 命令进行编译
  sass "$file" "css/$(basename "$file" .scss).css"
done

这段代码使用 for 循环遍历 sass/ 目录下的所有 Sass 文件，对于每个 Sass 文件，都执行一次 sass 命令进行编译，生成到 css/ 目录下。其中，basename 命令用于获取文件名，去除文件后缀，用于构造生成的 CSS 文件名。

保存文件后，赋予脚本执行权限。

chmod +x compile.sh

接下来，在终端中执行以下命令。

./compile.sh

即可一次性编译所有 Sass 文件，生成对应的 CSS 文件，存放在 css/ 目录下。

结束语

上述代码仅是一种简单的实现方式，实际中可根据需要进行调整。在编写 Shell/Bash 脚本时，建议先将每个命令单独测试，确保正确无误后再整合。同时，注意脚本中的路径是否正确，特别是相对路径的使用。这些细节处理好，才能编写出高效且可靠的 Shell/Bash 脚本。

代码片段：

```shell
#!/bin/bash

# 遍历 sass/ 目录下的所有 Sass 文件
for file in sass/*.scss
do
  # 对每个 Sass 文件执行 sass 命令进行编译
  sass "$file" "css/$(basename "$file" .scss).css"
done