SASS（Syntactically Awesome Stylesheet）是一個css預處理器，有助于減少CSS的重復，節省時間。 它是更穩定和強大的CSS擴展語言描述文檔的風格結構。sass中文網
而且Sass算是CSS的超集，它100%兼容CSS的語法，所有在 CSS 中正常工作的代碼也能在 SCSS 中正常工作。換個說法也就是：如果你喜歡，可以在Sass文件中完全以CSS的語法來寫代碼，它也是完全支持的。
SASS程序有3種使用方式：
作為命令行工具 作為獨立的Ruby模塊 作為任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件
Sass安裝
Sass的安裝分為2步：
- 安裝Ruby，sass程序基于Ruby所以需要先安裝Ruby
- 安裝Sass程序
安裝Ruby
從Ruby官網下載對應你電腦版本的安裝包，然后按照步驟一步一步安裝到你的電腦上（安裝過程中記得勾選Add Ruby executablesto your PATH，免去安裝后再去配置的煩惱）。完成安裝后，在你的命令行程序中輸入 ruby -v驗證是否安裝成功：
ruby -v #驗證版本號 #ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
如果出現對應的版本號說明安裝成功，那么你就可以進行下面的操作了。
安裝Sass
安裝完Ruby后，打開命令行工具，輸入以下命令安裝sass程序：
gem install sass #gem是Ruby命令 sass -v #驗證sass是否安裝成功
如果打印出版本號，說明我們安裝成功！
上述是一種官方安裝的方法，有時候官方提供的安裝方式可能是最簡潔的，但也有可能不是最快速的，所以下面介紹另外一種鏡像安裝，速度會相對快一些：
gem sources --remove #移除自帶源 gem sources -a https://gems.ruby-china.org/ #安裝RubyChina的源 gem sources -l #查看當前的源 gem install sass sass -v
Sass編譯
所有準備工作完成后，就可以開始sass的編譯。
編輯sass文件
打開編輯器，首先創建一個index.scss文件，然后保存好，內容如下：
index.scss文件
$color:yellow;
$font:18px;
$background:red;
body {
color:$color;
background:$background;
font-size:$font;
}
生成css文件（命令行版）
打開命令行工具，切換到index.scss文件所在目錄，執行以下命令：
sass index.scss index.css #把名為index的Sass文件轉換為CSS文件。 #每次有更新保存之后，都需要執行這個命令。
為了更方便操作，我們可以監聽這個文件，然后就省去了每次保存都要重新生成的麻煩。
sass --watch index.scss:index.css #`--watch`參數加上之后，可以監測index這個文件的變化，更新保存之后自動編譯。
多文件（文件夾）監聽命令：
sass --watch sass/main:dist/css #監視sass目錄下main文件夾中的所有Sass文件，并自動編譯為CSS文件之后，放到dist/css目錄下。
逆向操作，css文件轉換為sass/scss文件：
sass-convert index.css index.sass sass-convert index.css index.scss
生成css文件（編輯器版）
有些人可能就覺得上面的命令操作有些繁瑣，有沒有更簡便的方法呢，答案是肯定的，畢竟能人太多。我們可以通過編輯器插件的方式，自動編譯成css文件。
作為一個前端開發，我經常用到的編輯器就是sublime text，然而sublime中就有兩個比較好用的sass編輯插件：Sass（Sass語法高亮）和Sass Build（編譯）。非常之好用。如果不知道具體的插件安裝方法，請自行百度，節約時間，就是在珍惜生命！
完成好scss文件后，保存，快捷鍵Ctrl+B，就會在同一個文件夾里面生成對應的css文件和css.map文件。是不是省略了很多麻煩（就是這么任性）。
編譯結果
上面兩種方式都可以生成對應的css文件，生成的css文件如下：
index.css
body{
color:#ff0;
background:red;
font-size:18px
}
/*# sourceMAppingURL=index.css.map */
可以看到生成的css文件只包含CSS代碼，Sass源文件中設置的變量已經被處理了。
/*# sourceMappingURL=styles.css.map */`表示映射文件是styles.css.map，映射文件記錄了源文件到css文件的映射信息。
sass@import導入
sass提供導入機制，可以將頁面的共用較為通用的scss提取出來，這樣方便維護，其他頁面按需導入相關的scss文件，避免了所有的樣式都在一個樣式文件中，一個樣式文件較為繁重難以維護。
scss文件中引入scss文件
css3的@import，在css樣式表之中使用絕對或相對地址指定導入的外部樣式表文件。 如：@import url("style/index.css")；css3中的@import可能會造成延遲加載，有的地方沒有樣式。
sass @import解決了這個問題，它能將多個scss合并為一個。 如：@import "index.scss"。
index.scss文件中導入index2.scss文件
#index.scss文件
$color:yellow;
$font:18px;
$background:red;
@import 'index2.scss';
body {
color:$color;
background:$background;
font-size:$font;
width: $width;
height:$height;
}
#index2.scss文件
$width:100px;
$height:100px;
body{
font-family:"Times New Roman",Georgia,Serif;
}
/*生成后的index.css文件*/
body{
font-family:"Times New Roman",Georgia,Serif
}
body{
color:#ff0;
background:red;
font-size:18px;
width:100px;
height:100px
}
/*# sourceMappingURL=index.css.map */
用法：可以在被引入的文件中定義默認值，主文件@import這個文件后，如果主文件中變量有定義，就不會被覆蓋。
sass入門用法
語法與注釋
Sass中的注釋有3種： //我是單行注釋 不會出現在編譯之后任何格式的CSS文件中。 /*我是多行注釋*/ 只會出現在編譯之后代碼格式為expanded的CSS文件中。 /*!我是強制注釋*/ 會出現在任何代碼格式的CSS文件中。
//使用大括號的方式布局，類似于css
body {
color:red;
background:#fff;
}
div{
}
變量和嵌套
變量是Sass中最基本的語法。凡是css屬性的標準值（比如說1px或者bold）可存在的地方，都可以替換為變量。之后，如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變。 通過 $ 符號來定義，通過變量名稱實現多處重復引用。（注：變量名中連字符和下劃線等效，$primary_color 與 $primary-color是同一個變量）
$color:yellow; //定義變量
$font:18px; //定義變量
$background:red; //定義變量
body {
$width:180px; //定義局部變量
$header-color: orange !global; //可以在選擇器中使用 !global 標志定義全局變量。
color:$color; //引用變量
background:$background; //引用變量
font-size:$font; //引用變量
border:1px solid $color; //多個屬性值時引用變量
width:$width; //引用變量
}
div{
color:$header-color;
}
//編譯成css文件
body {
color:yellow;
background:red;
font-size:18px;
border:1px solid yellow;
width:180px;
}
div{
color:orange;
}
sass可以嵌套設置樣式，這樣比css方便了很多：
div{
p{
color:$color;
a{
font-size:$font;
}
}
span{font-size:$font;}
}
//編譯成css文件
div p{color:yellow;}
div p a{font-size:18px;}
div span{font-size:18px;}
大多數情況下上面那種簡單的嵌套都沒問題。但如果你想要在嵌套的選擇器里邊應用一個類似于：hover的偽類，就需要用到 & 這個連接父選擇器的標識符：
div {
p {
margin-bottom: 1.4px;
&:hover {
color: #999;
}
}
}
//編譯成css文件
div p { margin-bottom: 1.4px; }
div p:hover { color: #999; }
操作符
Sass操作符（或運算符）包括加法、減法、除法、等號操作符等。
等號操作符
所有數據類型都支持等號運算符：
==等于!=不等于
除了等號運算符之外，每種數據類型還支持各自的一組操作符。
數字操作符
SassScript支持以下標準的算術操作符:
+加-減*乘/除%取模
算術運算符的一個常見用法是寬度計算。
例如，下面的例子計算寬度百分比：
.container {
width: 100%;
}
article {
float: left;
width: 700px / 960px * 100%;
}
.sidebar {
float: right;
width: 200px / 960px * 100%;
}
經過編譯輸出以下CSS代碼：
.container {
width: 100%; }
article {
float: left;
width: 72.91667%; }
.sidebar {
float: right;
width: 20.83333%; }
使用算術操作符時，參與運算的數據單位必須相同。否則會報錯(例如，一個用px，另一個用em)：
.box-big {
font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'.
width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
}
顏色操作符
算術操作符也適用于顏色。計算顏色時，參與運算的是R, G, B分量，而不是整個六位數顏色值。
例如，當把兩個十六進制顏色值相加時，將依次把每一對分量值相加。
示例：
body {
color: #991100 + #002299;
}
經過編譯輸出以下CSS代碼：
body {
color: #993399; }
還可以對顏色和數字應用運算符。例如
body {
color: #112233 * 2;
}
經過編譯輸出以下CSS代碼：
body {
color: #224466; }
寫到這里，無不感慨sass的強大以及技術發展的迅速。到這里入門sass也綽綽有余了。后續會有進階文章繼續！
