Sass入門(mén)與實(shí)戰(zhàn)
**Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.**打開(kāi)Sass官網(wǎng)就可以看見(jiàn)這樣一句話提茁。這話一點(diǎn)兒都不謙虛:Sass世界上最成熟忧陪、最穩(wěn)定嘱支、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言！他如此自信想必是有各種自信的理由膝擂，下面我們就一起來(lái)了解了解Sass讶泰，看看它在吹牛還在真的如此厲害。
學(xué)過(guò)CSS的人都知道，它不是一種編程語(yǔ)言。網(wǎng)頁(yè)開(kāi)發(fā)離不開(kāi)它实昨，但它有發(fā)展緩慢。自然而然就有想出了解決方案：css預(yù)處理器
CSS 預(yù)處理器是什么盐固？一般來(lái)說(shuō)荒给，它們基于 CSS 擴(kuò)展了一套屬于自己的 DSL，來(lái)解決我們書(shū)寫(xiě) CSS 時(shí)難以解決的問(wèn)題：
語(yǔ)法不夠強(qiáng)大刁卜，比如無(wú)法嵌套書(shū)寫(xiě)導(dǎo)致模塊化開(kāi)發(fā)中需要書(shū)寫(xiě)很多重復(fù)的選擇器志电；
沒(méi)有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出蛔趴，導(dǎo)致難以維護(hù)挑辆。
所以這就決定了 CSS 預(yù)處理器的主要目標(biāo)：提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性鱼蝉。這不是錦上添花洒嗤，而恰恰是雪中送炭。
css預(yù)處理器已發(fā)展多年魁亦，處理Sass外渔隶，還有less,Stylus...
除了css預(yù)處理器，css后處理器也很流行如postcss
完全兼容 CSS3
在 CSS 語(yǔ)言基礎(chǔ)上添加了擴(kuò)展功能吉挣，比如變量派撕、嵌套 (nesting)、混合 (mixin)
對(duì)顏色和其它值進(jìn)行操作的{Sass::Script::Functions 函數(shù)}
函數(shù)庫(kù)控制指令之類的高級(jí)功能
良好的格式睬魂，可對(duì)輸出格式進(jìn)行定制
Sass 有兩種語(yǔ)法终吼。
第一種被稱為 SCSS (Sassy CSS)，是一個(gè) CSS3 語(yǔ)法的擴(kuò)充版本氯哮，也就是說(shuō)际跪，所有符合 CSS3 語(yǔ)法的樣式表也都是具有相同語(yǔ)法意義的 SCSS 文件。
第二種比較老的語(yǔ)法成為縮排語(yǔ)法（或者就稱為 "Sass"）喉钢， 提供了一種更簡(jiǎn)潔的 CSS 書(shū)寫(xiě)方式姆打。 它不使用花括號(hào)，而是通過(guò)縮排的方式來(lái)表達(dá)選擇符的嵌套層級(jí)肠虽，I而且也不使用分號(hào)幔戏，而是用換行符來(lái)分隔屬性。
一般使用Scss多余Sass税课，不過(guò)二者除了上述不同外闲延，基本在無(wú)差別，也許你和我一樣韩玩，有時(shí)候?qū)憣?xiě)Python后會(huì)突然想用Sass垒玲，有時(shí)有鐘情于Scss，這些都無(wú)關(guān)緊要
SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)
nested：嵌套縮進(jìn)的css代碼找颓，它是默認(rèn)值合愈。
expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼击狮。
compact：簡(jiǎn)潔格式的css代碼佛析。
compressed：壓縮后的css代碼。
最后推薦大家使用gulp來(lái)編譯Sass彪蓬。關(guān)于gulp這里不多講寸莫。下面給出一個(gè)簡(jiǎn)單gulp配置文件來(lái)編譯sass
constgulp=require('gulp')constsass=require('gulp-sass')gulp.task('sass',function() {returngulp.src('./sass/**/*.scss')? ? ? ? .pipe(sass().on('error',sass.logError))? ? ? ? .pipe(gulp.dest('./css'))})gulp.task('sass:watch',function() {gulp.watch('./sass/**/*.scss', ['sass'])})
具體參見(jiàn)GitHub
下面我們將快速學(xué)習(xí)sass的語(yǔ)法
Sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量寞焙，然后通過(guò)變量名來(lái)引用它們储狭，而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值互婿。或者辽狈，對(duì)于僅使用過(guò)一 次的屬性值慈参，你可以賦予其一個(gè)易懂的變量名，讓人一眼就知道這個(gè)屬性值的用途刮萌。
//scss style//-----------------------------------$fontStack:Helvetica,sans-serif;$primaryColor:#333;body{font-family:$fontStack;color:$primaryColor;}//css style//-----------------------------------body{font-family:Helvetica,sans-serif;color:#333;}
sass可以進(jìn)行選擇器的嵌套驮配，表示層級(jí)關(guān)系，看起來(lái)很優(yōu)雅整齊着茸。
//scss style//-----------------------------------nav{ul{margin:0;padding:0;list-style:none;? }li{display:inline-block; }a{display:block;padding:6px12px;text-decoration:none;? }}//css style//-----------------------------------navul{margin:0;padding:0;list-style:none;}navli{display:inline-block;}nava{display:block;padding:6px12px;text-decoration:none;}
SASS允許在代碼中使用算式：
body{margin: (14px/2);top:50px+ 100px;right:80*10%;}
sass中集成了大量的顏色函數(shù)壮锻，讓變換顏色更加簡(jiǎn)單。
//scss style//-----------------------------------$linkColor:#08c;a{text-decoration:none;color:$linkColor;&:hover{// &是父選擇器的標(biāo)識(shí)符color:darken($linkColor,10%);? ? }}//css style//-----------------------------------a{text-decoration:none;color:#0088cc;}a:hover{color:#006699;}
&是父選擇器的標(biāo)識(shí)符
Sass共有兩種注釋風(fēng)格涮阔。
標(biāo)準(zhǔn)的CSS注釋 /* comment */ 猜绣，會(huì)保留到編譯后的文件。
單行注釋 // comment敬特，只保留在SASS源文件中掰邢，編譯后被省略。
在/*后面加一個(gè)感嘆號(hào)伟阔，表示這是"重要注釋"辣之。即使是壓縮模式編譯，也會(huì)保留這行注釋皱炉，通郴彻溃可以用于聲明版權(quán)信息。
/*!我是個(gè)傲嬌的注釋合搅，不會(huì)被省略*/
sass中如導(dǎo)入其他sass文件多搀，最后編譯為一個(gè)css文件，優(yōu)于純css的@import
文件的名稱約定以下劃線開(kāi)頭
以下劃線卡頭的文件名稱不會(huì)被編譯
//scss style//-----------------------------------// _reset.scsshtml,body,ul,ol{margin:0;padding:0;}//scss style//-----------------------------------// base.scss@import'reset';body{font-size:100%Helvetica,sans-serif;background-color:#efefef;}//css style//-----------------------------------html,body,ul,ol{margin:0;padding:0;}body{background-color:#efefef;font-size:100%Helvetica,sans-serif;}
sass可通過(guò)@extend來(lái)實(shí)現(xiàn)代碼組合聲明历筝，使代碼更加優(yōu)越簡(jiǎn)潔酗昼。
//scss style//-----------------------------------.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}.warning{@extend.message;border-color:yellow;}//css style//-----------------------------------.message,.success,.error,.warning{border:1pxsolid#cccccc;padding:10px;color:#333;}.success{border-color:green;}.error{border-color:red;}.warning{border-color:yellow;}
sass中可用mixin定義一些代碼片段廊谓，且可傳參數(shù)梳猪，方便日后根據(jù)需求調(diào)用。比如說(shuō)處理css3瀏覽器前綴*(更好的解決方案：autoprefixer)*
//scss style//-----------------------------------@mixinbox-sizing($sizing) {-webkit-box-sizing:$sizing;-moz-box-sizing:$sizing;box-sizing:$sizing;}.box-border{border:1pxsolid#ccc;@includebox-sizing(border-box);}//css style//-----------------------------------.box-border{border:1pxsolid#ccc;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
mixin的強(qiáng)大之處蒸痹，在于可以指定參數(shù)和缺省值春弥。
高級(jí)用法可以翻譯為“用的少”，但威力很大“
@if可一個(gè)條件單獨(dú)使用叠荠，也可以和@else結(jié)合多條件使用
//scss style//-------------------------------$lte7:true;$type: monster;.ib{display:inline-block;@if$lte7{*display:inline;*zoom:1;? ? }}p{@if$type== ocean {color:blue;? }@else if$type== matador {color:red;? }@else if$type== monster {color:green;? }@else{color:black;? }}//css style//-------------------------------.ib{display:inline-block;*display:inline;*zoom:1;}p{color:green; }
SASS支持for循環(huán)：
for循環(huán)有兩種形式匿沛，分別為：@for $var from through 和@for $var from to 。$i表示變量榛鼎，start表示起始值逃呼，end表示結(jié)束值鳖孤，這兩個(gè)的區(qū)別是關(guān)鍵字through表示包括end這個(gè)數(shù)，而to則不包括end這個(gè)數(shù)抡笼。
@for$ifrom1to10{.border-#{$i}{border:#{$i}pxsolidblue;? }}
也支持while循環(huán)：
$i:6;@while$i>0{.item-#{$i}{width:2em*$i; }$i:$i- 2;}
each命令苏揣，作用與for類似：
語(yǔ)法為：@each $var in 。其中$var表示變量推姻，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)平匈。sass 3.3.0新加入了多字段循環(huán)和map數(shù)據(jù)循環(huán)。
//scss style//-------------------------------$animal-list: puma, sea-slug, egret, salamander;@each$animalin$animal-list{? .#{$animal}-icon{background-image:url('/images/#{$animal}.png');? }}//css style//-------------------------------.puma-icon{background-image:url('/images/puma.png'); }.sea-slug-icon{background-image:url('/images/sea-slug.png'); }.egret-icon{background-image:url('/images/egret.png'); }.salamander-icon{background-image:url('/images/salamander.png'); }
了解了上面這些內(nèi)容藏古，基本上就算入門(mén)了增炭，再去看看這些鏈接：
傳送門(mén)：GitHub
