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