此篇会介绍三种免费的 sass 编译方法。

Live Sass Compiler

这是一款免费 VSCode 插件，会自动将所有 sass、scss 编译为两只档案 .css、.map。

Step 1：下载插件

Step2：参数设置

两种开启档案方式：

• 第一种：开启设定 → 点击 开启设定（JSON）

• 第二种：开启命令列 → 输入 settings.json

参数解析：

预设在 settings.json 虽然搜寻不到 liveSassCompile 相关设置，但其实还是有 预设 的输出设置。

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": null
    }
  ]
}

• format：编译後的 CSS 格式。
  • expanded：未压缩，不做任何处理。
    • 利於阅读（常用於开发环境）
  • nested：类似 expanded，但会处理缩排。
  • compressed：压缩（压缩为一行，去除档案所有空格及缩排的输出格式）
    • 体积小（常用於专案上线）
  • compact：类似 compressed，但不处理空白字元。
• extensionName：编译後的副档名。
  • 通常都会设为 .css 或 .min.css（.min 通常代表压缩过的档案）。
• savePath：储存路径。（若资料夹不存在，则会新增资料夹）
  • null：编译後的档案会和 *.sass / *.scss 档案存放於相同路径底下。
  • /：绝对位置，从根目录开始。（例如 /dist/css）
  • ~：相对位置，相对於每个 *.sass / *.scss 档案开始。（例如 ~/../css/）

我常用设置：习惯将 scss 档案和 css 档案存放於不同资料夹。

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css/"
    }
],

Step3：运行插件

两种运行方式：

第一种：点击下方工具列 → Watch Sass

第二种：开启命令列 → 输入 live sass compile

Watchiing：代表监听中，只要储存档案就会自动编译。（⚠️没有储存档案就不会编译）

也会有图示来代表是否编译成功。

Live Sass Compiler 很适合作为新手学习 Sass 时编译工具的，但还是要讲一下优缺点。

优点：

• VSCode 整合度极高。

缺点：

• 当编译档案变多时，会变的很慢（非常慢）。

所以随着 sass 经验值点的越来越高时（档案变多，编译起来变慢时）就可以弃坑了。

Prepros

官方推荐自动编译 Sass的软件之一。

官方推荐软件

Step1：两种开启资料夹方法

• 第一种：点击 Add Project。
• 第二种：专案资料夹拖曳到 Prepros 中。

路径选择：记得选择根目录。（Prepros 会自动编译根目录底下 scss 档案）

Step2：执行软件

• 点击资料夹就会自动执行侦测。
  

• 绿灯代表侦测中。
  

编译後的路径：会自动依据 scss 路径做编译後的档案处理。

• 档案：会自动将编译後的 css 存在同目录中。
• 资料夹：会自动在上一层建立 css/ 资料夹存放编译後的 css。

下方图片中，橘框是编译後的 css 档案、红框是侦测中的档案。

优点：

• 速度很不错。

缺点：

• 会有广告（而且三不五时就会跳）。

npm

用指令的方式来编译。

Step1：下载套件

npm install sass -g

Step2：检查是否安装成功

sass --version

Step3：编译指令

语法：sass 编译对象路径 编译後路径

sass .\scss\all.scss .\css\all.css

上面是将 .\all.scss 档案编译到 .\all.css 内，不存在则会建立资料夹，此时就会生成编译好的 all.css 档案。

自动编译指令：--watch 参数

监听指定的档案，如有任何更动即自动编译。（达到自动化）

sass  --watch .\scss\all.scss .\css\all.css