SASS SCSS 編譯工具安裝教學，使用 Ruby-Sass

Posted on 2017-12-05 Edited on 2023-11-24 In SASS Views: Disqus:

先前準備

一、安裝scss to css語法轉換程式

遵照原廠文件所提供的程式，以windows平台為例，如果想要使用scss語法，

則須先安裝Ruby，然後再利用Ruby command line安裝sass(scss)，

你可以使用power shell或命令提示字元來下指令來安裝sass

$gem install sass

完成之後可輸入以下指令來確認程式版本

$sass -v

目前我使用的 Ruby 版本為： Ruby 2.5.1-1 (x64)

SASS 版本為：Ruby Sass 3.5.6

二、sass指令

1、轉換指令

先準備好欲轉換的input.scss檔，與輸出檔output.css檔，

在同個資料夾內輸入以下指令

$sass input.scss output.css

即可在output.css裡看到轉換完後的結果

2、即時轉換指令

先準備好input.scss檔與output.css檔，

然後輸入以下指令後

$sass --watch input.scss:output.css

每當input.scss修改完存檔後，會即時換到output.css檔裡。

3、輸出CSS後的格式縮排

關於輸出CSS格式不一定就只能有一種格式，共有四種格式可以選擇，

指令範例如下

$sass input.scss output.css --style nested

$sass input.scss output.css --style expanded

$sass input.scss output.css --style compact

$sass input.scss output.css --style compressed

個人習慣下的指令範例為 $sass --watch input.scss:output.css --style expanded

參考資料：