前言

SASS是一種CSS預(yù)處理器（css preprocessor）。它的基本思想是，用一種專門的編程語(yǔ)言，進(jìn)行網(wǎng)頁(yè)樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。

SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：

導(dǎo)入文件

@import命令，用來(lái)導(dǎo)入外部文件。

　　@import "path/filename.scss";

如果導(dǎo)入的是.css文件，則等同于css的import命令。

注釋

sass有兩種注釋方式，一種是標(biāo)準(zhǔn)的css注釋方式/* */，另一種則是//雙斜桿形式的單行注釋，不過(guò)這種單行注釋不會(huì)被轉(zhuǎn)譯出來(lái)。

1 變量

SASS允許使用變量，所有變量以$開(kāi)頭

普通變量

定義之后可以在全局范圍內(nèi)使用。

默認(rèn)變量

sass的默認(rèn)變量?jī)H需要在值后面加上!default即可。

sass的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值，然后根據(jù)需求來(lái)覆蓋的，覆蓋的方式也很簡(jiǎn)單，只需要在默認(rèn)變量之前重新聲明下變量即可

默認(rèn)變量的價(jià)值在進(jìn)行組件化開(kāi)發(fā)的時(shí)候會(huì)非常有用。

特殊變量

一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

多值變量

多值變量分為list類型和map類型，簡(jiǎn)單來(lái)說(shuō)list類型有點(diǎn)像js中的數(shù)組，而map類型有點(diǎn)像js中的對(duì)象

全局變量

在變量值后面加上!global即為全局變量。這個(gè)目前還用不上，不過(guò)將會(huì)在sass 3.4后的版本中正式應(yīng)用。目前的sass變量范圍飽受詬病，所以才有了這個(gè)全局變量。

2 嵌套(Nesting)

sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說(shuō)起或用到的都是選擇器的嵌套。

在選擇器嵌套中，可以使用&表示父元素選擇器

屬性嵌套：所謂屬性嵌套指的是有些屬性擁有同一個(gè)開(kāi)始單詞，如border-width，border-color都是以border開(kāi)頭。

.fakeshadow {
 border: {
 style: solid;
 left: {
 width: 4px;
 color: #888;
 }
 right: {
 width: 2px;
 color: #ccc;
 }
 }
}

@at-root：sass3.3.0中新增的功能，用來(lái)跳出選擇器嵌套的。

3 混合(mixin)

sass中使用 @mixin 聲明混合，可以傳遞參數(shù)，參數(shù)名以$符號(hào)開(kāi)始，多個(gè)參數(shù)以逗號(hào)分開(kāi)，也可以給參數(shù)設(shè)置默認(rèn)值。聲明的 @mixin 通過(guò) @include 來(lái)調(diào)用

多個(gè)參數(shù)mixin

調(diào)用時(shí)可直接傳入值，如 @include 傳入?yún)?shù)的個(gè)數(shù)小于 @mixin 定義參數(shù)的個(gè)數(shù)，則按照順序表示，后面不足的使用默認(rèn)值，如不足的沒(méi)有默認(rèn)值則報(bào)錯(cuò)。除此之外還可以選擇性的傳入?yún)?shù)，使用參數(shù)名與值同時(shí)傳入。

多組值參數(shù)mixin

如果一個(gè)參數(shù)可以有多組值，如box-shadow、transition等，那么參數(shù)則需要在變量后加三個(gè)點(diǎn)表示，如$variables...。

@content

@content在sass3.2.0中引入，可以用來(lái)解決css3的@media等帶來(lái)的問(wèn)題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開(kāi)始。

 //sass style
//------------------------------- 
@mixin max-screen($res){
 @media only screen and ( max-width: $res )
 {
 @content;
 }
}

@include max-screen(480px) {
 body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
 body { color: red }
}

** @mixin 通過(guò) @include 調(diào)用后解析出來(lái)的樣式是以拷貝形式存在的，而下面的繼承則是以聯(lián)合聲明的方式存在的，所以從3.2.0版本以后，建議傳遞參數(shù)的用 @mixin ，而非傳遞參數(shù)類的使用下面的繼承%。**

4 繼承

sass中，選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，要使用關(guān)鍵詞 @extend ，后面緊跟需要繼承的選擇器。

占位選擇器%

從sass 3.2.0以后就可以定義占位選擇器%。這種選擇器的優(yōu)勢(shì)在于：如果不調(diào)用則不會(huì)有任何多余的css文件，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實(shí)際應(yīng)用中不管是否使用了 @extend 去繼承相應(yīng)的樣式，都會(huì)解析出來(lái)所有的樣式。占位選擇器以%標(biāo)識(shí)定義，通過(guò) @extend 調(diào)用。

占位選擇器的出現(xiàn)，使css文件更加簡(jiǎn)練可控，沒(méi)有多余。所以可以用其定義一些基礎(chǔ)的樣式文件，然后根據(jù)需要調(diào)用產(chǎn)生相應(yīng)的css。

//sass style
//-------------------------------
%ir{
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}
%clearfix{
 @if $lte7 {
 *zoom: 1;
 }
 &:before,
 &:after {
 content: "";
 display: table;
 font: 0/0 a;
 }
 &:after {
 clear: both;
 }
}
#header{
 h1{
 @extend %ir;
 width:300px;
 }
}
.ir{
 @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}
#header h1{
 width:300px;
}

在 @media 中暫時(shí)不能 @extend @media外的代碼片段，以后將會(huì)可以。

5 函數(shù)

sass定義了很多函數(shù)可供使用，當(dāng)然你也可以自己定義函數(shù)，以 @fuction 開(kāi)始。sass的官方函數(shù)鏈接為：sass fuction，實(shí)際項(xiàng)目中我們使用最多的應(yīng)該是顏色函數(shù)，而顏色函數(shù)中又以lighten減淡和darken加深為最，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個(gè)參數(shù)都是顏色值，第二個(gè)參數(shù)都是百分比。

// pixels to rems 
@function pxToRem($px) {
 @return $px / $baseFontSize * 1rem;
}

6 運(yùn)算

sass具有運(yùn)算的特性，可以對(duì)數(shù)值型的Value(如：數(shù)字、顏色、變量等)進(jìn)行加減乘除四則運(yùn)算。請(qǐng)注意運(yùn)算符前后請(qǐng)留一個(gè)空格，不然會(huì)出錯(cuò)。另外，要注意運(yùn)算單位

7 條件判斷及循環(huán)

@if判斷

@if可一個(gè)條件單獨(dú)使用，也可以和 @else 結(jié)合多條件使用

三目判斷

if($condition, $if_true, $if_false)

for循環(huán)

for循環(huán)有兩種形式，分別為：@for $var from

@each循環(huán)

語(yǔ)法為：@each $var in

多個(gè)字段list數(shù)據(jù)循環(huán)

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
 .#{$animal}-icon {
 background-image: url('/images/#{$animal}.png');
 border: 2px solid $color;
 cursor: $cursor;
 }
}

//css style
//-------------------------------
.puma-icon {
 background-image: url('/images/puma.png');
 border: 2px solid black;
 cursor: default; 
}
.sea-slug-icon {
 background-image: url('/images/sea-slug.png');
 border: 2px solid blue;
 cursor: pointer; 
}
.egret-icon {
 background-image: url('/images/egret.png');
 border: 2px solid white;
 cursor: move; 
}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com