Sass 使用

1. 通過命令行使用 Sass

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

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

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

2. 在前端項(xiàng)目中使用

在目前主流的前端項(xiàng)目中，一般是使用 Webpack 來構(gòu)建我們的前端項(xiàng)目，并且大多數(shù)都跑在 Node 環(huán)境下，所以首先我們要安裝 node-sass，在前面的安裝章節(jié)已經(jīng)講解。

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

npm install sass-loader --save-dev

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

3. 在線 Sass 轉(zhuǎn) CSS

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