寫在前面的話：隨着CSS文件越來越大，內容越來越復雜，對其進行很好的維護將變的很困難。這時CSS預處理器就能夠幫上大忙了，它們往往擁有變量、嵌套、繼承等許多CSS不具備的特性。有很多CSS預處理器，這里總結Sass的使用方法。
======正文開始======
我們可以通過一種類似css的編程語言編寫代碼，保存為.scss后綴名的文件，然后使用Sass進行處理為css文件，而這種.scss文件中可以有變量、嵌套等功能，有些編程的味道,Sass簡單介紹看這里：Sass；同時.scss文件也能夠通過Sass處理為壓縮的、縮進的等不同風格的css代碼，方便后期的部署。下面是我的一些學習總結。
一、環境布置
1.安裝rubby：
Sass是用ruby寫的，需要ruby的運行環境，從以下鏈接下載rubyinstaller進行安裝（windows）：http://rubyinstaller.org/
2.安裝Sass
安裝完成ruby后，接下來安裝Sass。由於國內ruby源現在被牆，通過下面方式進行安裝SASS，打開cmd命令行。
（1）移除原有的ruby源地址
gem sources --remove https://rubygems.org/
（2）新增可用的ruby源地址
gem sources -a https://ruby.taobao.org
（3） 安裝Sass
gem install sass
（4）sublime支持scss文件高亮顯示
借助package control安裝sass插件，之后set syntax為sass即可。
（5）防止Sass中文注釋亂碼
后續寫.scss代碼過程中中文注釋會有亂碼的情況，找到engine.rb文件（一般位於Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目錄下面），在所有的require后面新增如下代碼：
Encoding.default_external = Encoding.find('utf-8')
至此，Sass環境部署完成。
二、編譯.scss文件為css文件
總結具體Sass語法格式之前，先說一下如何編譯.scss文件為css文件。
1.切換到.scss文件所在目錄
命令行下切換到代碼文件夾目錄（如Z:\），假設有文件test.scss文件，里面內容如下：（SASS完全支持css語法）
h1{
font-size:17px;
}
h2{
font-size:18px;
}
2.編譯scss文件為css文件
運行命令：sass --style compressed test.scss test.css，即可生成壓縮版的css文件，並且命名為test.css。幾點說明：
（1）--style 后面可以有四個參數可選，分別為expanded、nested、compact、compressed，分別選用不同參數的效果可以自己嘗試體驗。
（2）test.scss和test.css文件目錄可以自定義，例如把Z盤sass目錄下的test.scss文件編譯為壓縮版的文件，並放置在Z盤css目錄下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css
（3）開發過程中，只需要修改scss文件，然后編譯；前端頁面只需要引用相應的css文件即可。
3.偵聽文件和文件夾
如果希望某一個scss文件或者相應的文件夾下面文件修改后，自動進行編譯，那么可以使用偵聽命令。
（1）偵聽文件：
sass --watch --style compressed test.scss:test.css
當test.scss文件有修改后，會自動編譯為test.css，並且是compressed的。
（2）偵聽文件夾：
sass --watch --style compressed sass:css
當sass文件夾下.scss文件有修改的時候，會自動編譯為與sass中文件同名的css文件。
備注：
（1）注意源文件和目標文件之間是冒號，與編譯命令中為空格不同。
（2）生成的map文件可以查找source map文件的作用。
三、Sass基本用法
下面對Sass基本的用法進行總結，SASS語法與CSS具有極高的相似度。
以下演示源代碼放在test.scss文件中，編譯后生成的css文件放在test.css文件中，偵聽命令為：
sass --watch --style expanded sass/test.scss:css/test.css
1.變量：以$開頭。
源代碼：
|
1
2
3
4
|
$color
1:
#aeaeae
;
.div
1
{
background-color
:$color
1
;
}
|
編譯后：
|
1
2
3
4
5
|
.div
1
{
background-color
:
#aeaeae
;
}
/*# sourceMappingURL=test.css.map */
|
2.變量嵌套在字符串之中：應該以#{}包裹。
源代碼：
|
1
2
3
4
|
$
left
:
left
;
.div
1
{
border-#{$
left
}-
width
:
5px
;
}
|
編譯后：
|
1
2
3
4
5
|
.div
1
{
border-left-width
:
5px
;
}
/*# sourceMappingURL=test.css.map */
|
3.允許進行計算：
源代碼：
|
1
2
3
4
|
$
left
:
20px
;
.div
1
{
margin-left
:$
left
+
12px
;
}
|
編譯后：
|
1
2
3
4
5
|
.div
1
{
margin-left
:
32px
;
}
/*# sourceMappingURL=test.css.map */
|
4.允許選擇器嵌套：
源代碼：
|
1
2
3
4
5
6
7
8
|
.div
1
{
.span
1
{
height
:
12px
;
}
.div
2
{
width
:
16px
;
}
}
|
編譯后：
|
1
2
3
4
5
6
7
8
|
.div
1
.span
1
{
height
:
12px
;
}
.div
1
.div
2
{
width
:
16px
;
}
/*# sourceMappingURL=test.css.map */
|
5.使用&引用父元素
源代碼：
|
1
2
3
4
5
|
.div
1
{
&:hover{
cursor
: hand;
}
}
|
編譯后：
|
1
2
3
4
5
|
.div
1:
hover {
cursor
: hand;
}
/*# sourceMappingURL=test.css.map */
|
6.注釋：
有三種形式：
（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。
（2）/*! */：重要注釋，任何style的css文件中都會有，一般放置css文件版權說明等信息。
（3）/* */：該注釋在compressed的style的css中沒有，其他style的css文件都會含有。
備注：平時（1）（2）使用的多些
7.允許繼承：@extend 類名
源代碼：
|
1
2
3
4
5
6
7
|
.class
1
{
font-size
:
19px
;
}
.class
2
{
@extend .class
1
;
color
:
black
;
}
|
編譯后：
|
1
2
3
4
5
6
7
8
9
|
.class
1
, .class
2
{
font-size
:
19px
;
}
.class
2
{
color
:
black
;
}
/*# sourceMappingURL=test.css.map */
|
注意：如果在class2后面有設置了class1的屬性，那么也會影響class2，如下：
源代碼：
|
1
2
3
4
5
6
7
8
9
10
|
.class
1
{
font-size
:
19px
;
}
.class
2
{
@extend .class
1
;
color
:
black
;
}
.class
1
{
font-weight
:
bold
;
}
|
編譯后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.class
1
, .class
2
{
font-size
:
19px
;
}
.class
2
{
color
:
black
;
}
.class
1
, .class
2
{
font-weight
:
bold
;
}
/*# sourceMappingURL=test.css.map */
|
可見sass不是單遍編譯。
8.引用外部css文件（Partials）
有時網頁的不同部分會分成多個文件來寫樣式，或者引用通用的一些樣式，那么可以使用@import。
源代碼：
|
1
2
3
|
@import
"_test1.scss"
;
@import
"_test2.scss"
;
@import
"_test3.scss"
;
|
編譯后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
h
1
{
font-size
:
17px
;
}
h
2
{
font-size
:
17px
;
}
h
3
{
font-size
:
17px
;
}
/*# sourceMappingURL=test.css.map */
|
其中_test1.scss、_test2.scss、_test3.scss文件分別設置的h1 h2 h3。一般情況下，復用的文件名如果以下划線_開頭的話，Sass會認為該文件是一個partial file，不會將其編譯為css文件，主要功能是要通過import引用。
9.mixin和include：
mixin類似於C語音的宏，存儲通用模塊，通過@include引用。
源代碼：
|
1
2
3
4
5
6
7
8
|
@mixin common{
display
:
block
;
margin
:
0
auto
;
}
.class
1
{
font-size
:
16px
;
@include common;
}
|
編譯后：
|
1
2
3
4
5
6
7
|
.class
1
{
font-size
:
16px
;
display
:
block
;
margin
:
0
auto
;
}
/*# sourceMappingURL=test.css.map */
|
還可以更靈活，像函數一樣，如下：
源代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@mixin common($value
1
,$value
2
,$defaultValue:
12px
){
display
:
block
;
margin-left
:$value
1
;
margin-right
:$value
2
;
padding
:$defaultValue;
}
.class
1
{
font-size
:
16px
;
@include common(
12px
,
13px
,
15px
);
}
.class
2
{
font-size
:
16px
;
@include common(
12px
,
13px
);
}
|
編譯后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.class
1
{
font-size
:
16px
;
display
:
block
;
margin-left
:
12px
;
margin-right
:
13px
;
padding
:
15px
;
}
.class
2
{
font-size
:
16px
;
display
:
block
;
margin-left
:
12px
;
margin-right
:
13px
;
padding
:
12px
;
}
/*# sourceMappingURL=test.css.map */
|
最后，bootstrap第四版發布了下載，並且從less轉移到了sass，可以下載里面看看它里面的scss代碼，體會一下，也許你會發現更多有趣的用法。