摘要：變量聲明和調(diào)用這是的編程元素基礎(chǔ)之一。如下在最外層聲明的是全局變量，全局范圍內(nèi)可以調(diào)用，在中聲明的是的局部變量，只在內(nèi)部內(nèi)進(jìn)行調(diào)用。生成的如下上面的內(nèi)容就是的基礎(chǔ)篇，進(jìn)階篇的話會(huì)整理一下函數(shù)和方法規(guī)則相關(guān)的東西。

css 其實(shí)不是一門編程語言， css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或 XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。我們用它來實(shí)現(xiàn)表現(xiàn)層和結(jié)構(gòu)層的分離，也就是 html 和樣式的分離。你可以用它為網(wǎng)頁制定樣式，但是他無法像 JavaScript 一樣聲明變量，調(diào)用函數(shù)，使用條件語句，可以說 JavaScript 是靈活的，動(dòng)態(tài)的，而 css 是死板的，一成不變的。

所以，有人想要為其加入編程的思想，讓他擁有遍歷，擁有方法，甚至擁有繼承，能夠告訴你語法上的錯(cuò)誤，所以有了css預(yù)處理，它的思想是先用一門新的專門編程的語言來設(shè)計(jì)網(wǎng)頁樣式，再編譯成css，其實(shí)最后引用的仍舊是編譯出來的css。

說到css預(yù)處理，可能大部分人首先想到的是Less?，F(xiàn)在做css預(yù)處理的語言比較優(yōu)秀的Less是其一：它快速方便入門簡單，sass是其二：相對(duì)來說說它更加靈活，語法更多(尤其是if else for)，當(dāng)然好多人不使用的原因是嫌棄它安裝不方便(還好有淘寶鏡像)，其三是Stylus：他與sass比較類似都是更加靈活強(qiáng)大。

想好什么時(shí)候我們可以使用css預(yù)處理
css預(yù)處理讓我們對(duì)樣式的處理更加編程化，但是我們?nèi)孕枰紤]好在怎樣的環(huán)境中使用它，因?yàn)槲覀冎?，無論你的sass代碼多么炫酷，邏輯多么縝密，到最后都是生成了一個(gè)css文件。

所以我們需要根據(jù)項(xiàng)目的大小以及開發(fā)時(shí)間團(tuán)隊(duì)成本來確定，如果項(xiàng)目比較小需要的css并不是太多并且開發(fā)時(shí)間緊迫團(tuán)隊(duì)里很多人還不會(huì)使用，那么可能使用原生的css可能會(huì)更好一些。

很多開發(fā)者原本是想使用sass的，但是因?yàn)?b>sass是基于ruby的，墻在上，ruby裝半天裝不上，于是放棄,這里推薦使用淘寶的鏡像來進(jìn)行安裝。

推薦使用koala, koala是一個(gè)前端預(yù)處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發(fā)者更高效地使用它們進(jìn)行開發(fā)?？缙脚_(tái)運(yùn)行，完美兼容windows、linux、mac。

如果是學(xué)習(xí)的話可以先使用koala來進(jìn)行調(diào)試，如果使用到現(xiàn)代工程化項(xiàng)目中，推薦使用webpack安裝配置sass-loader

先來看看區(qū)別吧

$color : red;

//sass語法
.box
    color:$color;

//scss語法
.box{
　　color:$color;
}

其實(shí) sass 語法是 sass 最開始的語法結(jié)構(gòu)，是通過 tab 縮進(jìn)來進(jìn)行的一個(gè)規(guī)則，有點(diǎn)類似 jade模板的那種縮進(jìn)，而且這種語法規(guī)則十分嚴(yán)格，有啥不對(duì)勁，編譯的時(shí)候就報(bào)錯(cuò)。

而 scss 呢，是 sass 的新語法格式，不要認(rèn)為他是另外一種預(yù)處理語言，其實(shí)它是 sass 在發(fā)現(xiàn)之前的語法結(jié)構(gòu)太過于嚴(yán)格，并且和 css 有點(diǎn)不像后重新定制的語法結(jié)構(gòu)，它在外觀上是與css基本一致的，并且它十分寬松，你可以直接將之前的 css 代碼復(fù)制過來。

我在這里寫在了一個(gè)代碼塊中只是示例，其實(shí)他們文件名是分別以 .sass 和 .scss 來結(jié)尾的。

這是 sass 的編程元素基礎(chǔ)之一。在 JS 中我們使用 var 來聲明變量，當(dāng)然 ES6 中新加了 let const。而在sass聲明和調(diào)用變量的規(guī)則如下

$height: 15px !default;  //聲明默認(rèn)變量
$height: 50px;　　//聲明普通變量
body{
    height: $height; 
}

變量有默認(rèn)變量和普通變量之分，默認(rèn)變量只需像 !important 一樣在值后面加上 !default 即可。其實(shí)一般情況下我們只需要聲明普通變量，默認(rèn)變量在開發(fā)組件時(shí)使用比較方便。

和JS類似，sass語法中也有局部變量和全局變量。如下在最外層聲明的是全局變量，全局范圍內(nèi)可以調(diào)用，在em{}中聲明的是em的局部變量，只在em{}內(nèi)部內(nèi)進(jìn)行調(diào)用。

$color:#000;　　//全局變量
.block {
  color: $color;
}
em {
  $color: #fff;　　//局部變量
  a {    //選擇器嵌套
    color: $color;
    font: {    //屬性嵌套
　　  size: 12px;
　　  weight: bold;
　  }
    &:hover { //偽類嵌套
     color: $color;
    }   
  }
}

和JS類似，sass也擁有自己的數(shù)據(jù)類型分別是

數(shù)字: 如，1、 2、 13、 10px；
字符串：有引號(hào)字符串或無引號(hào)字符串，如，"foo"、 "bar"、 baz；
顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布爾型：如，true、 false；
空值：如，null；
值列表：用空格或者逗號(hào)分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

編程的思想，混合宏是一個(gè)類似于函數(shù)的存在，當(dāng)然，他并不是函數(shù)，簡單來說就是增加參數(shù)功能的使得靈活度提升的可重用的代碼塊。

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

button {
    @include border-radius;
}

這里是一個(gè)簡單的混合宏的使用，先是用 @mixin 定義了一個(gè)名叫 border-radius 的混合宏，然后在代碼中利用 @include 進(jìn)行調(diào)用，其實(shí)這樣的話并不能太大體現(xiàn)出混合宏的特色?？聪旅娴?/p>

@mixin border-radius1($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
@mixin border-radius2($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}


.box1 {
  @include border-radius(5px);
}
.box2 {
  @include border-radius;
}
.box2 {
  @include border-radius(5px);
}

從代碼里可以看出，混合宏可以像函數(shù)一樣傳入?yún)?shù)，并且可以像 ES6 的函數(shù)擴(kuò)展一樣添加參數(shù)默認(rèn)值，如果在調(diào)用的時(shí)候不傳參數(shù)，那么就會(huì)使用默認(rèn)的值，這樣極大的增加了代碼的靈活性，省卻很多開發(fā)時(shí)間。

其實(shí)，mixin 的靈活還不僅僅如此，它可以傳入多個(gè)參數(shù)，這樣我們想到了函數(shù)可以根據(jù)參數(shù)數(shù)量的不同來執(zhí)行不同的代碼，是的，sass也可以做到。

@mixin size($width,$height){    //兩個(gè)參數(shù)或者多個(gè)參數(shù)可以這樣這樣定義
  width: $width;
  height: $height;
}

.box-center {
  @include size(100px,200px);
}
@mixin box-shadow($shadows...){    //參數(shù)過多可以使用...來代替
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

上面兩個(gè)代碼塊第一個(gè)比較簡單，就是增加參數(shù)數(shù)目。下面的代碼塊我們利用sass的if else方法來實(shí)現(xiàn)了判斷，如果參數(shù)數(shù)目大于等于1，也就是傳了參數(shù)，那么我們執(zhí)行上面的代碼，如果沒有傳參我們執(zhí)行下面的代碼，設(shè)置默認(rèn)的$shadows值生成代碼塊。

但是混合宏也有不足之處：那就是調(diào)用一個(gè)混合宏生成的css代碼并不會(huì)進(jìn)行合并，這也是因?yàn)樗軌騻鲄⑺O(shè)置的，所以對(duì)于復(fù)用性很強(qiáng)的代碼塊不推薦使用混合宏。

sass允許你使用@extend繼承別的代碼塊，并且通過@extend所繼承的代碼塊會(huì)在生成css的時(shí)候進(jìn)行合并~完美解決了上面的問題。

.btn1 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

%btn2 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

%btn3 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary1 {
  background-color: #f36;
  color: #fff;
  @extend .btn1;
}

.btn-primary2 {
  background-color: #f36;
  color: #fff;
  @extend %btn2;
}

上面的代碼中.btn1是預(yù)先定義好的類，然后我們?cè)?b>.btn-primary1中繼承他的所有代碼塊，而%btn2就是在標(biāo)題里所提到的占位符，占位符的代碼塊如果不被繼承在生成的css中是不會(huì)顯示出來的，所以如果你是用sass編譯css的話，公共類使用占位符來定義是一個(gè)很不錯(cuò)的選擇。為了加深理解我們看下上面的代碼所生成的css代碼。

.btn1, .btn-primary1 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary2 {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary1 {
  background-color: #f36;
  color: #fff; }

.btn-primary2 {
  background-color: #f36;
  color: #fff; }

繼承btn1的btn-primary1他和btn1進(jìn)行了合并，而我們使用占位符定義的%btn2 %btn3在生成代碼里沒有顯示，因?yàn)?b>btn-primary2繼承了%btn2，所以他繼承的公共部分被多帶帶拿出來，如果有多個(gè)代碼塊繼承%btn2，他們會(huì)進(jìn)行合并。

占位符還是混合宏，主要還是看你的代碼怎么使用，如果只是靜態(tài)的代碼公共塊，那么占位符會(huì)比較適合，而如果是可變的代碼例如寫一個(gè)復(fù)雜的css3動(dòng)畫之類的，可能混合宏比較適合了。

如果接觸過jade模板的朋友會(huì)比較熟悉，這里的插值和它用法是基本一致的。讓我們來看一個(gè)復(fù)雜的代碼塊。

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

首先我們聲明了一個(gè)$properties的變量，里面是一個(gè)值列表里面兩個(gè)字符串，@mixin方法里我們通過@each方法循環(huán)出值列表里面的字符串然后利用插值的方法將字符串插入進(jìn)去，我們看下生成的css代碼

.login-box {
  margin-top: 14px;
  padding-top: 14px; }

這里只是做一個(gè)示例，正常情況下我們不會(huì)用這么復(fù)雜的方法來生成這么短的css代碼。

sass允許我們做一些基本的運(yùn)算：加減乘除，但是我要說的是：注意單位！注意單位！注意單位！當(dāng)然如果你異想天開em+px，px*px，px/rem.................

需要知道的是sass里允許進(jìn)行顏色運(yùn)算，也就是說 #222222 * 2你將會(huì)得到 #444444，其實(shí)顏色的運(yùn)算機(jī)制是分段運(yùn)算也就是說如果22*2 22*2 22*2然后在進(jìn)行合并的。

字符串可以通過+來進(jìn)行鏈接，需要注意的是因?yàn)?b>sass的字符串有兩種類型，帶引號(hào)和不帶引號(hào)，相同相加當(dāng)然出來的是一致的。如果有引號(hào)的字符串被添加了一個(gè)沒有引號(hào)的字符串 （也就是，帶引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果會(huì)是一個(gè)有引號(hào)的字符串。 同樣的，如果一個(gè)沒有引號(hào)的字符串被添加了一個(gè)有引號(hào)的字符串 （沒有引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果將是一個(gè)沒有引號(hào)的字符串，其實(shí)就是誰在左邊就跟著誰。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//生成的css如下
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

上面的內(nèi)容就是sass的基礎(chǔ)篇，進(jìn)階篇的話會(huì)整理一下函數(shù)和方法規(guī)則相關(guān)的東西。