Sass 使用

1. 通過命令行使用 Sass

前面我們講了 Sass 的安裝，假如你在 Ruby 環境下安裝了 Sass ，我們可以直接通過命令行來使用 Sass ，Sass 提供了很多命令像編譯、配置等等，下面我們寫出一些常用的命令供你參考：

//單個文件轉換命令, 將 a.scss 的內容轉換為 css 到 b.css 中
$ sass a.scss b.css
//單文件監聽命令，文件發生變化則自動編譯
$ sass --watch a.scss:b.css
// 監聽指定的目錄
$ sass --watch assets/sass:public/styles
// 在運行Sass之前加載一個Ruby gem 將內容加載到 Sass 環境中
$ sass --require=rails-sass-images style.scss style.css
// 加載Compass框架并使其mixin和函數可用于Sas
$ sass --compass style.scss style.css
// 設置輸出格式
 $ sass --style=nested
 // 幫助文檔
 $ sass --help

命令就介紹這么多了，一般我們前端工程師直接在命令行使用 Sass 的情況很少，我們主要還是看下面在前端項目中的使用。

2. 在前端項目中使用

在目前主流的前端項目中，一般是使用 Webpack 來構建我們的前端項目，并且大多數都跑在 Node 環境下，所以首先我們要安裝 node-sass，在前面的安裝章節已經講解。

安裝好 node-sass 后還需要執行如下命令安裝 sass-loader ：

npm install sass-loader --save-dev

安裝好 sass-loader 后按照 Webpack 文檔 配置 sass-loader 后就可以在項目中使用了。下面配出視頻演示：

3. 在線 Sass 轉 CSS

對于本系列教程，我還是建議你使用在線 Sass 轉 CSS ，這樣可以邊學邊寫然后還能實時的看見轉換后的 CSS 是什么樣的，在后面的章節中我也會以演示轉換后的 CSS 為主來講解 Sass 語法，你可以使用這個非常好用的在線 Sass 轉 CSS （sassmeister.com），下面我來演示下如何使用它：