Sass簡介&安裝&編譯&文法

一、sass簡介

CSS作為層疊樣式表，是一種靜态語言。CSS不是一個程式設計語言，我們可以用它來開發網頁樣式，但是沒有辦法用它進行程式設計。但SASS的出現，讓CSS實作了通過代碼程式設計來實作的方式。

SASS是一種CSS開發工具，提供了許多便利的寫法，讓CSS的處理實作了可程式設計處理。

SASS擴充了CSS3，增加了規則、變量、混入、選擇器、繼承等等特性，可以生成風格良好的CSS樣式表檔案，易于組織和維護。

二、sass安裝

官方文章：sass中文網安裝

檢視版本資訊，下圖說明安裝成功：

安裝流程：

1、安裝

Ruby

。sass基于Ruby語言開發而成，是以安裝sass前需要安裝Ruby，安裝過程中請注意勾選 Add Ruby executables to your PATH 添加到系統環境變量。（注:mac下自帶Ruby無需在安裝Ruby!）

2、終端測試安裝是否成功：

ruby -v

3、如上已經安裝成功。但因為國内網絡的問題導緻gem源間歇性中斷，是以我們需要更換gem源，更換成國内伺服器上的。

//1.删除并替換原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

//2.列印是否替換成功，該指令可以檢視gem源
gem sources -l
結果列印：https://gems.ruby-china.com      （ 確定隻有 gems.ruby-china.com ）
           

4、安裝sass：

gem install sass

接着執行

gem install compass

安裝完成之後，通過運作下面的指令來确認應用已經正确地安裝到了電腦中（例如）：

sass -v
結果列印：Sass 3.x.x (Selective Steve)

compass -v
結果列印：Compass 1.x.x (Polaris)
           

5、sass更新、檢視版本、sass指令幫助：

//更新sass
gem update sass

//檢視sass版本
sass -v

//檢視sass幫助
sass -h
           

注意：Compass是Sass的工具庫（toolkit）。

   Sass本身隻是一個編譯器，Compass在它的基礎上，封裝了一系列有用的子產品和模闆，補充Sass的功能

參考文檔：sass-compass之一

三、sass編譯

參考文檔：SASS用法指南 阮一峰

官方文檔：編譯sass sass中文網

sass編譯有很多種方式，如指令行編譯模式、sublime插件SASS-Build、編譯軟體koala、前端自動化軟體codekit、Grunt打造前端自動化工作流grunt-sass、Gulp打造前端自動化工作流gulp-ruby-sass等。

SASS檔案的字尾名有兩種方式，.sass要求更嚴謹規範的文法不需要分号和大括号，而.scss可以有分号和大括号使用起來更簡便。

是以我們一般使用

.scss

檔案。

1、指令行編譯：

//在螢幕上顯示.scss檔案轉化的css代碼（假設檔案名為output）
sass test.scss

//單檔案轉換指令
sass input.scss output.css

//單檔案監聽指令（一旦源檔案有變動，就自動生成編譯後的版本）
sass --watch input.scss:output.css

//如果你有很多的sass檔案的目錄，你也可以告訴sass監聽整個目錄：
sass --watch app/sass:public/stylesheets
           

2、SASS提供四個編譯風格的選項：（四種編譯排版示範連結上方官方文檔）

• nested：      嵌套縮進的css代碼，它是預設值。
• expanded： 沒有縮進的、擴充的css代碼。
• compact：   簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

生産環境當中，一般使用最後一個選項：

sass --style compressed test.sass test.css

　　

選擇編譯格式并添加調試map：

sass --watch input.scss:output.css --style compressed --sourcemap

–style表示解析後的css是什麼排版格式；

–sourcemap表示開啟sourcemap調試。開啟sourcemap調試後，會生成一個字尾名為.css.map檔案。

另外還有一個 --debug-info，開啟debug資訊，不常用。

3、其他編譯方式： 軟體編譯，比如koala&codekit、Live Sass編譯器（VSCode擴充）

有篇文章：Visual Studio Code插件Live Sass Compiler可将Sass或Scss實時編譯為CSS

四、文法

官方文檔1：Sass中文網 快速入門

官方文檔2：Sass中文網 中文文檔

簡單使用：阮一峰的網絡日志

另附語：

@charset "utf-8"

 //sass檔案裡，想要寫中文必須加字元集 “utf-8” 聲明，不然會報錯。

sass檔案中，變量的指派隻是單純的文本替換，跟css中的屬性值的寫法基本一樣。