Sass - ruby 設定

發表於 2020-12-20

另一種編譯方式

可以使用 liveSass 來編譯 Sass。

安裝 ruby

安裝 ruby 以及 Sass 環境：https://wcc723.github.io/sass/2013/09/02/start-ruby/

安裝 Ruby

安裝 Compass

Compass 是支援 Sass 的 Framework，非常強大，它是 CSS 架構框架，有許多好用的 mixins。

安裝 Ruby 完成後會在開始建立 Ruby 目錄。
在此目錄選擇 Start command prompt with ruby 打開 dos 視窗。
鍵入 gem install compass，安裝 compass。

新建 Compass 專案

在 dos 視窗環境下，進入工作目錄，鍵入 compass init 初始化成 compass 環境的工作目錄。

初始化產生的目錄與檔案

.sass-cache         cache 目錄
sass                sass 目錄，可以改成 scss
stylesheets         css 目錄，可以改成 css
config.rb           設定檔，可以設定各目錄的路徑，修改過 config.rb 後，要重新啟動 `compass watch`

config.rb

將 # line_comments = false 前面的#號拿掉就不會產生出註解。
css 顯示方式 output_style = :xxxxxxx
修改過 config.rb 後，要重新啟動 compass watch

備份初始化、設定完成後的環境，之後新專案可以使用

編譯 Sass 檔案

在終端機視窗環境下，確定在該工作目錄，鍵入 compass watch，此時打開的 scss 檔案編輯，存檔後會自動編譯成 css。

其他（others）

Sass 資源

連結	說明
Susy	用來建立 CSS 網格的 mixins，函式庫在 Sass 使用者中非常熱門
Breakpoint	單一用途的 mixin 函式庫，讓撰寫媒體查詢簡單迅速
Compass	Compass 非常強大，它是 CSS 架構框架，有許多好用的 mixins
Bourbon	很棒的工具，小型 mixin 函式庫，動畫、轉場等等效果
Neat	一組簡單建立網格的 mixins，作者跟 Bourbon 同一人