為CSS加入編程元素，這被叫做“CSS預(yù)處理器”?；舅枷胧牵靡环N專門的編程語言，進行網(wǎng)頁樣式設(shè)計，然后編譯成正常的CSS文件。
一、什么是SASS
SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計者的時間，使得CSS的開發(fā)，變得簡單和可維護。
Sass是成熟、穩(wěn)定、強大的CSS預(yù)處理器。而SCSS是Sass3版本當中引入的新語法特性，完全兼容CSS3的同時繼承了Sass強大的動態(tài)功能。
特性概覽
CSS書寫代碼規(guī)模較大的WEB應(yīng)用時，容易造成選擇器、層疊的復(fù)雜度過高，因此推薦通過SASS預(yù)處理器進行CSS的開發(fā)，SASS提供的變了、嵌套、混合、繼承等特性，讓CSS的書寫更加有趣與程式化。
二、安裝和使用
2.1安裝
SASS是Ruby語言寫的，但兩者的語法沒有關(guān)系。不懂Ruby,照樣使用。只是必須選安裝Ruby，然后再安裝SASS。
2.2使用
SASS文件就是普通的文本文件，里面可以直接使用CSS語法。文件后綴名是.scss，意思為Sassy CSS
下面命令，可在屏幕上顯示.scss文件轉(zhuǎn)化的css代碼
sass test.scss
如果想要顯示結(jié)果保存成文件，后面跟一個.css文件名
sass test.scss test.css
SASS提供四個編譯風(fēng)格的選項：
1.nested:嵌套縮進的css代碼，它是默認值
2.expanded: 沒有縮進的、擴展的css代碼
3.compact：簡潔格式的css代碼。
4.compressed：壓縮后的css代碼。
生產(chǎn)環(huán)境中，一般使用最后一個選項
sass -style compressed test.scss test.css
你也可以讓SASS監(jiān)聽某個文件或目錄，一旦源文件有變動，就自動生成編譯后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
三、基本用法
3.1變量
變量以$開頭
$baseColor: #000000;
div {
color: $baseColor;
}
如果變量需要鑲嵌在字符串中，就必須刺蛾在#{}之中。
$side: left;
.round {
border-#{$side}-radius: 5px;
}
3.2計算功能
SASS允許在代碼中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3嵌套
div h1 {
color: red;
}
// 可以寫成
div {
h {
color: red;
}
}
屬性也可以嵌套，如border-color屬性可以寫成：
p{ border-color: red; }
p {
border: { //注意border后面必須加冒號
color: red;
}
}
在嵌套的代碼塊內(nèi)，可以使用&引用父元素。如a:hover偽類，可以寫成：
a {
&:hover { color: #ffffff;}
}
3.4注釋
SASS共有兩種注釋風(fēng)格。
標準的css注釋 /comment/，會保留到編譯后的文件。
單行注釋//comment，只保留在SASS源文件中，編譯后會被省略。
在/*后面加一個感嘆號，表示這是“重要注釋”。即使是壓縮模式編譯，也會保留這行注釋，通常用于聲明版權(quán)信息。
四、代碼的重用
4.1繼承
一個選擇器可以繼承另一個選擇器。如，現(xiàn)有clss1:
.class1 {
border: 1px solid #ddd;
}
// class2想要繼承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size: 120%;
}
4.2 Mixin
Mixin是可以重用的代碼塊。
使用@mixin命令，定義一個代碼塊。使用@include命令，調(diào)用這個mixin。
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
mixin的強大之處，在于可以指定參數(shù)和缺省值。
@mixin left ($val: 10px) {
float: left;
margin-right: $val;
}
//使用時，根據(jù)需要加參數(shù)：
div {
@include left(20px)
}
下面是一個mixin的實例，用來生成瀏覽器前綴。
@mixin round ($vert, $horz, $radius: 5px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
//使用的時候
#footer {
@include round(top, left, 4px);
}
4.3顏色函數(shù)
提供了一些內(nèi)置的顏色函數(shù)，以便生成系列顏色。
lighten(#cc3, 10%) //#d6d65c
darken(#cc3, 10%) //#a3a329
grayscale(#cc3) //808080
complement(#cc3) //332
4.4插入文件
@import命令，用來插入外部文件，如果插入的是.css文件，則等同于css的import命令。
@import 'path/test.scss'
五、高級用法
5.1條件語句
@if可用來判斷，配套還有@else命令
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2循環(huán)語句
支持for循環(huán)，也支持while循環(huán),each命令
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
//each,作用與for類似
@each $member in a,b,c,d {
.#{$member} {
background-image: url("/image/#{$member}.jpg")
}
}
5.3自定義函數(shù)
可編寫自己的函數(shù)
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px)
}
