關(guān)于sass 3.3.0更新說明——3.3.0
sublime相關(guān)插件為：scss語法高亮，sass語法高亮，編譯，保存即編譯，格式化
sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號。而本教程中所說的所有sass文件都指后綴名為scss的文件。在此也建議使用后綴名為scss的文件，以避免sass后綴名的嚴格格式要求報錯。
//文件后綴名為sass的語法body background: #eee font-size:12pxp background: #0982c1//文件后綴名為scss的語法 body { background: #eee; font-size:12px;}p{ background: #0982c1;} sass的導(dǎo)入(@import)規(guī)則和CSS的有所不同，編譯時會將@import的scss文件合并進來只生成一個CSS文件。但是如果你在sass文件中導(dǎo)入css文件如@import 'reset.css'，那效果跟普通CSS導(dǎo)入樣式文件一樣，導(dǎo)入的css文件不會合并到編譯后的文件中，而是以@import方式存在。
所有的sass導(dǎo)入文件都可以忽略后綴名.scss。一般來說基礎(chǔ)的文件命名方法以_開頭，如_mixin.scss。這種文件在導(dǎo)入的時候可以不寫下劃線，可寫成@import "mixin"。
被導(dǎo)入sass文件a.scss：
//a.scss//-------------------------------body { background: #eee;}需要導(dǎo)入樣式的sass文件b.scss：
@import "reset.css";@import "a";p{ background: #0982c1;} 轉(zhuǎn)譯出來的b.css樣式：
@import "reset.css";body { background: #eee;}p{ background: #0982c1;}根據(jù)上面的代碼可以看出，b.scss編譯后，reset.css繼續(xù)保持import的方式，而a.scss則被整合進來了。
sass有兩種注釋方式，一種是標準的css注釋方式/* */，另一種則是//雙斜桿形式的單行注釋，不過這種單行注釋不會被轉(zhuǎn)譯出來。
/**我是css的標準注釋*設(shè)置body內(nèi)距*/body{ padding:5px;} 單行注釋跟JavaScript語言中的注釋一樣，使用又斜杠（//），但單行注釋不會輸入到CSS中。
//我是雙斜杠表示的單行注釋//設(shè)置body內(nèi)距body{ padding:5px; //5px} sass的變量必須是$開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設(shè)置一樣），如果值后面加上!default則表示默認值。
定義之后可以在全局范圍內(nèi)使用。
//sass style//-------------------------------$fontSize: 12px;body{ font-size:$fontSize;}//css style//-------------------------------body{ font-size:12px;}sass的默認變量僅需要在值后面加上!default即可。
//sass style//-------------------------------$baseLineHeight: 1.5 !default;body{ line-height: $baseLineHeight; }//css style//-------------------------------body{ line-height:1.5;}sass的默認變量一般是用來設(shè)置默認值，然后根據(jù)需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可
//sass style//-------------------------------$baseLineHeight: 2;$baseLineHeight: 1.5 !default;body{ line-height: $baseLineHeight; }//css style//-------------------------------body{ line-height:2;}可以看出現(xiàn)在編譯后的line-height為2，而不是我們默認的1.5。默認變量的價值在進行組件化開發(fā)的時候會非常有用。
一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。
//sass style//-------------------------------$borderDirection: top !default; $baseFontSize: 12px !default;$baseLineHeight: 1.5 !default;//應(yīng)用于class和屬性.border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc;}//應(yīng)用于復(fù)雜的屬性值body{ font:#{$baseFontSize}/#{$baseLineHeight};}//css style//-------------------------------.border-top{ border-top:1px solid #ccc;}body { font: 12px/1.5;}多值變量分為list類型和map類型，簡單來說list類型有點像js中的數(shù)組，而map類型有點像js中的對象。
list數(shù)據(jù)可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關(guān)于list數(shù)據(jù)操作還有很多其他函數(shù)如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（搜索List Functions即可）
定義
//一維數(shù)據(jù)$px: 5px 10px 20px 30px;//二維數(shù)據(jù)，相當于js中的二維數(shù)組$px: 5px 10px, 20px 30px;$px: (5px 10px) (20px 30px);使用
//sass style//-------------------------------$linkColor: #08c #333 !default;//第一個值為默認值，第二個鼠標滑過值a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); }}//css style//-------------------------------a{ color:#08c;}a:hover{ color:#333;}map數(shù)據(jù)以key和value成對出現(xiàn)，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);?？赏ㄟ^map-get($map,$key)取值。關(guān)于map數(shù)據(jù)還有很多其他函數(shù)如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具體可參考sass Functions（搜索Map Functions即可）
定義
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);使用
//sass style//-------------------------------$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}//css style//-------------------------------h1 { font-size: 2em; }h2 { font-size: 1.5em; }h3 { font-size: 1.2em; }在變量值后面加上!global即為全局變量。這個目前還用不上，不過將會在sass 3.4后的版本中正式應(yīng)用。目前的sass變量范圍飽受詬病，所以才有了這個全局變量。
目前變量機制
在選擇器中聲明的變量會覆蓋外面全局聲明的變量。(這也就人們常說的sass沒有局部變量)
//sass style//-------------------------------$fontSize: 12px;body{ $fontSize: 14px; font-size:$fontSize;}p{ font-size:$fontSize;}//css style//-------------------------------body{ font-size:14px;}p{ font-size:14px;}啟用global之后的機制
請注意，這個目前還無法使用，所以樣式不是真實解析出來的。
//sass style//-------------------------------$fontSize: 12px;$color: #333;body{ $fontSize: 14px; $color： #fff !global; font-size:$fontSize; color:$color;}p{ font-size:$fontSize; color:$color;}//css style//-------------------------------body{ font-size:14px; color:#fff;}p{ font-size:12px; color:#fff;}這里設(shè)置了兩個變量，然后在body里面重新設(shè)置了下，有點不同的是對于$color變量，我們設(shè)置了!global。通過編譯后的css可以看到font-size取值不同，而color取值相同。與上面的機制對比就會發(fā)現(xiàn)默認在選擇器里面的變量為局部變量，而只有設(shè)置了!global之后才會成為全局變量。
關(guān)于變量的詳細分析請查閱sass揭秘之變量
sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。
所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承，從而增強了sass文件的結(jié)構(gòu)性和可讀性。
在選擇器嵌套中，可以使用&表示父元素選擇器
//sass style//-------------------------------#top_nav{ line-height: 40px; text-transform: capitalize; background-color:#333; li{ float:left; } a{ display: block; padding: 0 10px; color: #fff; &:hover{ color:#ddd; } }}//css style//-------------------------------#top_nav{ line-height: 40px; text-transform: capitalize; background-color:#333;} #top_nav li{ float:left;}#top_nav a{ display: block; padding: 0 10px; color: #fff;}#top_nav a:hover{ color:#ddd;}所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。拿個官網(wǎng)的實例看下：
//sass style//-------------------------------.fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } }}//css style//-------------------------------.fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }當然這只是個屬性嵌套的例子，如果實際這樣使用，那估計得瘋掉。
sass3.3.0中新增的功能，用來跳出選擇器嵌套的。默認所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。
普通跳出嵌套
//sass style//-------------------------------//沒有跳出.parent-1 { color:#f00; .child { width:100px; }}//單個選擇器跳出.parent-2 { color:#f00; @at-root .child { width:200px; }}//多個選擇器跳出.parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } }}//css style//-------------------------------.parent-1 { color: #f00;}.parent-1 .child { width: 100px;}.parent-2 { color: #f00;}.child { width: 200px;}.parent-3 { background: #f00;}.child1 { width: 300px;}.child2 { width: 400px;}@at-root (without: ...)和@at-root (with: ...)
默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關(guān)鍵詞有四個：all（表示所有），rule（表示常規(guī)css），media（表示media），support（表示support，因為@support目前還無法廣泛使用，所以在此不表）。我們默認的@at-root其實就是@at-root (without:rule)。
//sass style//-------------------------------//跳出父級元素嵌套@media print { .parent1{ color:#f00; @at-root .child1 { width:200px; } }}//跳出media嵌套，父級有效@media print { .parent2{ color:#f00; @at-root (without: media) { .child2 { width:200px; } } }}//跳出media和父級@media print { .parent3{ color:#f00; @at-root (without: all) { .child3 { width:200px; } } }}//sass style//-------------------------------@media print { .parent1 { color: #f00; } .child1 { width: 200px; }}@media print { .parent2 { color: #f00; }}.parent2 .child2 { width: 200px;}@media print { .parent3 { color: #f00; }}.child3 { width: 200px;}@at-root與&配合使用
//sass style//-------------------------------.child{ @at-root .parent &{ color:#f00; }}//css style//-------------------------------.parent .child { color: #f00;}應(yīng)用于@keyframe
//sass style//-------------------------------.demo { ... animation: motion 3s infinite; @at-root { @keyframes motion { ... } }}//css style//------------------------------- .demo { ... animation: motion 3s infinite;}@keyframes motion { ...}sass中使用@mixin聲明混合，可以傳遞參數(shù)，參數(shù)名以$符號開始，多個參數(shù)以逗號分開，也可以給參數(shù)設(shè)置默認值。聲明的@mixin通過@include來調(diào)用。
無參數(shù)mixin
//sass style//-------------------------------@mixin center-block { margin-left:auto; margin-right:auto;}.demo{ @include center-block;}//css style//-------------------------------.demo{ margin-left:auto; margin-right:auto;}有參數(shù)mixin
//sass style//------------------------------- @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity);}//css style//-------------------------------.opacity{ @include opacity; //參數(shù)使用默認值}.opacity-80{ @include opacity(80); //傳遞參數(shù)}多個參數(shù)mixin
調(diào)用時可直接傳入值，如@include傳入?yún)?shù)的個數(shù)小于@mixin定義參數(shù)的個數(shù)，則按照順序表示，后面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入?yún)?shù)，使用參數(shù)名與值同時傳入。
//sass style//------------------------------- @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; }.imgtext-h li{ @include horizontal-line(1px solid #ccc);}.imgtext-h--product li{ @include horizontal-line($padding:15px);}//css style//-------------------------------.imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px;}.imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px;}多組值參數(shù)mixin
如果一個參數(shù)可以有多組值，如box-shadow、transition等，那么參數(shù)則需要在變量后加三個點表示，如$variables...。
//sass style//------------------------------- //box-shadow可以有多組值，所以在變量參數(shù)后面添加...@mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; box-shadow:$shadow;}.box{ border:1px solid #ccc; @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//css style//-------------------------------.box{ border:1px solid #ccc; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);}@content在sass3.2.0中引入，可以用來解決css3的@media等帶來的問題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開始。
//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 }} PS：@mixin通過@include調(diào)用后解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯(lián)合聲明的方式存在的，所以從3.2.0版本以后，建議傳遞參數(shù)的用@mixin，而非傳遞參數(shù)類的使用下面的繼承%。
sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，要使用關(guān)鍵詞@extend，后面緊跟需要繼承的選擇器。
//sass style//-------------------------------h1{ border: 4px solid #ff9aa9;}.speaker{ @extend h1; border-width: 2px;}//css style//-------------------------------h1,.speaker{ border: 4px solid #ff9aa9;}.speaker{ border-width: 2px;}%從sass 3.2.0以后就可以定義占位選擇器%。這種選擇器的優(yōu)勢在于：如果不調(diào)用則不會有任何多余的css文件，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實際應(yīng)用中不管是否使用了@extend去繼承相應(yīng)的樣式，都會解析出來所有的樣式。占位選擇器以%標識定義，通過@extend調(diào)用。
//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;}如上代碼，定義了兩個占位選擇器%ir和%clearfix，其中%clearfix這個沒有調(diào)用，所以解析出來的css樣式也就沒有clearfix部分。占位選擇器的出現(xiàn)，使css文件更加簡練可控，沒有多余。所以可以用其定義一些基礎(chǔ)的樣式文件，然后根據(jù)需要調(diào)用產(chǎn)生相應(yīng)的css。
ps：在@media中暫時不能@extend @media外的代碼片段，以后將會可以。
sass定義了很多函數(shù)可供使用，當然你也可以自己定義函數(shù)，以@fuction開始。sass的官方函數(shù)鏈接為：sass fuction，實際項目中我們使用最多的應(yīng)該是顏色函數(shù)，而顏色函數(shù)中又以lighten減淡和darken加深為最，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個參數(shù)都是顏色值，第二個參數(shù)都是百分比。
//sass style//------------------------------- $baseFontSize: 10px !default;$gray: #ccc !defualt; // pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem;}body{ font-size:$baseFontSize; color:lighten($gray,10%);}.test{ font-size:pxToRem(16px); color:darken($gray,10%);}//css style//-------------------------------body{ font-size:10px; color:#E6E6E6;}.test{ font-size:1.6rem; color:#B3B3B3;}關(guān)于@mixin，%，@function更多說明可參閱：
sass具有運算的特性，可以對數(shù)值型的Value(如：數(shù)字、顏色、變量等)進行加減乘除四則運算。請注意運算符前后請留一個空格，不然會出錯。
$baseFontSize: 14px !default;$baseLineHeight: 1.5 !default;$baseGap: $baseFontSize * $baseLineHeight !default;$halfBaseGap: $baseGap / 2 !default;$samllFontSize: $baseFontSize - 2px !default;//grid $_columns: 12 !default; // Total number of columns$_column-width: 60px !default; // Width of a single column$_gutter: 20px !default; // Width of the gutter$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width@if可一個條件單獨使用，也可以和@else結(jié)合多條件使用
//sass 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; }語法為：if($condition, $if_true, $if_false) 。三個參數(shù)分別表示：條件，條件為真的值，條件為假的值。
if(true, 1px, 2px) => 1pxif(false, 1px, 2px) => 2pxfor循環(huán)有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結(jié)束值，這兩個的區(qū)別是關(guān)鍵字through表示包括end這個數(shù)，而to則不包括end這個數(shù)。
//sass style//-------------------------------@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}//css style//-------------------------------.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }語法為：@each $var in <list or map>。其中$var表示變量，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)。sass 3.3.0新加入了多字段循環(huán)和map數(shù)據(jù)循環(huán)。
單個字段list數(shù)據(jù)循環(huán)
//sass style//-------------------------------$animal-list: puma, sea-slug, egret, salamander;@each $animal in $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'); }多個字段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; }多個字段map數(shù)據(jù)循環(huán)
//sass style//-------------------------------$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}//css style//-------------------------------h1 { font-size: 2em; }h2 { font-size: 1.5em; }h3 { font-size: 1.2em; }關(guān)于循環(huán)判斷詳細分析請查閱：sass揭秘之@if，@for，@each
聯(lián)系客服
