http://sass-lang.com/
Sass是一種CSS預(yù)處理器語(yǔ)言，通過(guò)編程方式生成CSS代碼。因?yàn)榭删幊绦隽常圆倏仂`活性自由度高，方便實(shí)現(xiàn)一些直接編寫(xiě)CSS代碼較困難的代碼柄驻。
同時(shí)狐树，因?yàn)镾ass是生成CSS的語(yǔ)言，所以寫(xiě)出來(lái)的Sass文件是不能直接用的鸿脓，必須經(jīng)過(guò)編譯器編譯成CSS文件才能使用抑钟。
Sass有什么好處？
Sass的主要特性如下：變量野哭、嵌套在塔、導(dǎo)入、混合拨黔、繼承蛔溃、運(yùn)算、函數(shù)篱蝇。這些特性為編寫(xiě)CSS加入編程控制的能力贺待。
如何開(kāi)始使用Sass
直接使用任何文本或代碼編輯器都可以開(kāi)始編輯Sass代碼，要將Sass文件轉(zhuǎn)換為CSS文件零截，則需傷使用Sass命令行編譯器或桌面集成編譯軟件麸塞。
安裝Sass編譯器
Sass編譯器使用Ruby環(huán)境，所以本地安裝使用Sass編譯器之前需要有Ruby環(huán)境涧衙，Ruby安裝另見(jiàn)...
Ruby環(huán)境準(zhǔn)備完畢后哪工，使用gem安裝Sass：
gem install sass
Sass語(yǔ)法
先分清sass與scss
Sass使用sass和scss這兩種后綴名以區(qū)分不同的語(yǔ)法格式：
- sass與普通CSS的語(yǔ)法格式區(qū)別較大，其不使用花括號(hào)和分號(hào)绍撞。
- scss接近普通CSS的語(yǔ)法格式正勒，使用與CSS相同的花括號(hào)和分號(hào)。
具體要使用哪種格式傻铣，自由選擇章贞。
在sass格式中，取消花括號(hào)，改為使用二個(gè)空格縮進(jìn)嵌套鸭限；取消分號(hào)蜕径，以行分隔。
注意：屬性冒號(hào)后與屬性值之間必須有空格間隔败京，否則會(huì)報(bào)錯(cuò)兜喻。
以下sass代碼：
#div1
width: 50px
height: 30px
編譯后為如下css代碼：
#div1{
width:50px;
height:50px;
}
選擇器嵌套
#sample
.span
font-size:12px
font-weight:bold
屬性嵌套
帶有相同前綴的屬性可進(jìn)行嵌套
#sample
font:
size:12px
weight:bold
變量
$red:#f00
h1
color:$red
函數(shù)
.div1
color:darken($red,10%)
background:lighten($red,10%)
表達(dá)式
p
color:$red - #101
font-size:$fontsize+10px;
混合
重用代碼
使用@mixin關(guān)鍵字定義混合代碼，使用@include使用混合代碼
@mixin后面是定義混合的名字
@mixin border-radius($amount:5px)
-moz-border-radius:$amount
-webkit-border-radius:$amount
border-radius:$amount
h1
@include border-radius(2px)
.speaker
@include border-radius
沒(méi)有給出參數(shù)赡麦，會(huì)使用設(shè)置的默認(rèn)值
選擇器繼承
使用@extend后面跟要繼承的選擇器
h1
border:4px solid #f00
.speaker
@extend h1
border-width:2px
