一掌动，CSS 預(yù)處理器

CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是歇攻，用一種專(zhuān)門(mén)的編程語(yǔ)言，為 CSS 增加了一些編程的特性梆造，將 CSS 作為目標(biāo)生成文件缴守，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作，無(wú)需考慮瀏覽器的兼容性問(wèn)題”镇辉，例如你可以在 CSS 中使用變量屡穗、簡(jiǎn)單的邏輯程序、函數(shù)

$color: red;

.test {
    color: $color;
}

如上使用了變量$color

二忽肛，Sass

Sass 是采用 **Ruby **語(yǔ)言編寫(xiě)的一款 CSS 預(yù)處理語(yǔ)言村砂，它誕生于2007年，是最大的成熟的 CSS 預(yù)處理語(yǔ)言屹逛。最初它是為了配合 HAML

三础废，Sass 和 SCSS 有什么區(qū)別？

Sass 和 SCSS 其實(shí)是同一種東西罕模，我們平時(shí)都稱(chēng)之為 Sass评腺，兩者之間不同之處有以下兩點(diǎn)：
文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名淑掌，而 SCSS 是以“.scss”后綴為擴(kuò)展名
語(yǔ)法書(shū)寫(xiě)方式不同歇僧，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書(shū)寫(xiě)和我們的 CSS 語(yǔ)法書(shū)寫(xiě)方式非常類(lèi)似诈悍。

四祸轮，SCSS語(yǔ)法格式

SCSS 是 Sass 的新語(yǔ)法格式，從外形上來(lái)判斷他和 CSS 長(zhǎng)得幾乎是一模一樣侥钳，代碼都包裹在一對(duì)大括號(hào)里适袜，并且末尾結(jié)束處都有一個(gè)分號(hào)。其文件名格式常常以“.scss”為擴(kuò)展名

同樣的這段 CSS 代碼：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

我們使用 SCSS 語(yǔ)法格式將按下面這樣來(lái)書(shū)寫(xiě)：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

五舷夺，Sass 編譯

在項(xiàng)目中還是引用“.css”文件苦酱，Sass 只不過(guò)是做為一個(gè)預(yù)處理工具，提前幫你做事情给猾，只有你需要時(shí)候疫萤，他才有攻效。因?yàn)?Sass 開(kāi)發(fā)之后敢伸，要讓 Web 頁(yè)面能調(diào)用 Sass 寫(xiě)好的東西扯饶，就得有這么一個(gè)過(guò)程，這個(gè)過(guò)程就稱(chēng)之為 Sass 編譯過(guò)程池颈。

[Sass]命令編譯

命令編譯是指使用你電腦中的命令終端尾序，通過(guò)輸入 Sass 指令來(lái)編譯 Sass。這種編譯方式是最直接也是最簡(jiǎn)單的一種方式躯砰。因?yàn)橹恍枰谀愕拿罱K端輸入

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

watch 舉例：
來(lái)看一個(gè)簡(jiǎn)單的示例每币，假設(shè)我本地有一個(gè)項(xiàng)目，我要把項(xiàng)目中“bootstrap.scss”編譯出“bootstrap.css”文件琢歇，并且將編譯出來(lái)的文件放在“css”文件夾中兰怠，我就可以在我的命令終端中執(zhí)行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件李茫，命令終端就能監(jiān)測(cè)揭保，并重新編譯出文件：

六，[Sass]聲明變量

如果值后面加上!default則表示默認(rèn)值涌矢。
sass 的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值，然后根據(jù)需求來(lái)覆蓋的快骗，覆蓋的方式也很簡(jiǎn)單娜庇，只需要在默認(rèn)變量之前重新聲明下變量即可

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

編譯后的css代碼：

body{
    line-height:2;
}

六，[Sass]局部變量和全局變量

一個(gè)例子說(shuō)明一切

//SCSS
$color: orange !default;//定義全局變量(在選擇器方篮、函數(shù)名秀、混合宏...的外面定義的變量為全局變量).
block { 
  color: $color;//調(diào)用全局變量
}
em { 
  $color: red;//定義局部變量 
  a { color: $color;//調(diào)用局部變量 }
}
span { color: $color;//調(diào)用全局變量}

什么時(shí)候聲明變量？
1, 該值至少重復(fù)出現(xiàn)了兩次藕溅；
2, 該值至少可能會(huì)被更新一次匕得；
3, 該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。

七，[Sass]嵌套

Sass 的嵌套分為三種：

• 選擇器嵌套
• 屬性嵌套
• 偽類(lèi)嵌套

1汁掠、選擇器嵌套

1略吨、選擇器嵌套

假設(shè)我們有一段這樣的結(jié)構(gòu)：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想選中 header 中的 a 標(biāo)簽，在寫(xiě) CSS 會(huì)這樣寫(xiě)：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中考阱，就可以使用選擇器的嵌套來(lái)實(shí)現(xiàn)：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

2,屬性嵌套

Sass 中還提供屬性嵌套翠忠，CSS 有一些屬性前綴相同，只是后綴不一樣乞榨，比如：border-top/border-right秽之，與這個(gè)類(lèi)似的還有 margin、padding吃既、font 等屬性考榨。假設(shè)你的樣式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我們可以這樣寫(xiě)：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3,偽類(lèi)嵌套

其實(shí)偽類(lèi)嵌套和屬性嵌套非常類(lèi)似，只不過(guò)他需要借助&符號(hào)一起配合使用鹦倚。我們就拿經(jīng)典的“clearfix”為例吧：

.clearfix{
  &:before,&:after 
  { 
    content:""; 
    display: table; 
  }
  &:after 
  { clear:both; overflow: hidden; }
}

編譯出來(lái)的 CSS：

clearfix:before, .clearfix:after
 { 
   content: ""; 
   display: table;
}
.clearfix:after { clear: both; overflow: hidden;}

八河质，[Sass]混合宏

如果你的整個(gè)網(wǎng)站中有幾處小樣式類(lèi)似，比如顏色申鱼，字體等愤诱，在 Sass 可以使用變量來(lái)統(tǒng)一處理，那么這種選擇還是不錯(cuò)的捐友。但當(dāng)你的樣式變得越來(lái)越復(fù)雜淫半，需要重復(fù)使用大段的樣式時(shí)，使用變量就無(wú)法達(dá)到我們目了匣砖。這個(gè)時(shí)候 Sass 中的混合宏就會(huì)變得非常有意義

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

@mixin 是用來(lái)聲明混合宏的關(guān)鍵詞科吭，有點(diǎn)類(lèi)似 CSS 中的 @media、@font-face 一樣猴鲫。border-radius 是混合宏的名稱(chēng)对人。大括號(hào)里面是復(fù)用的樣式代碼。

上面是一個(gè)簡(jiǎn)單的定義混合宏的方法拂共，當(dāng)然牺弄， Sass 中的混合宏還提供更為復(fù)雜的，你可以在大括號(hào)里面寫(xiě)上帶有邏輯關(guān)系宜狐，幫助更好的做你想做的事情,如：

@mixin box-shadow($shadow**...**) {
   @if length($shadow) >= 1 { 
      @include prefixer(box-shadow, $shadow); 
    } @else{ $shadow:0 0 4px rgba(0,0,0,.3); 
      @include prefixer(box-shadow, $shadow); }}

在 Sass 中通過(guò) @mixin 關(guān)鍵詞聲明了一個(gè)混合宏势告，那么在實(shí)際調(diào)用中，其匹配了一個(gè)關(guān)鍵詞“@include”來(lái)調(diào)用聲明好的混合宏抚恒。例如在你的樣式中定義了一個(gè)圓角的混合宏“border-radius”:

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

在一個(gè)按鈕中要調(diào)用定義好的混合宏“border-radius”咱台，可以這樣使用：

button { **@include** border-radius;}

這個(gè)時(shí)候編譯出來(lái)的 CSS:

button { -webkit-border-radius: 3px; border-radius: 3px;}

九，[Sass]擴(kuò)展/繼承

在 Sass 中是通過(guò)關(guān)鍵詞 “@extend”來(lái)繼承已存在的類(lèi)樣式塊俭驮，從而實(shí)現(xiàn)代碼的繼承//

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

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

十回溺，[Sass]占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能. %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話(huà)遗遵，不會(huì)產(chǎn)生任何代碼

%mt5 {
  margin-top: 5px;
}

.btn {
  @extend %mt5;
}

對(duì)以上來(lái)個(gè)下總結(jié)

十一萍恕，@if

假設(shè)要控制一個(gè)元素隱藏或顯示，我們就可以定義一個(gè)混合宏瓮恭，通過(guò) @if...@else... 來(lái)判斷傳進(jìn)參數(shù)的值來(lái)控制 display 的值雄坪。

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    @debug "$boolean is #{$boolean}";
      display: block;
    }
    @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

十二，@for

在 Sass 的 @for 循環(huán)中有兩種方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

這兩個(gè)的區(qū)別是關(guān)鍵字 through 表示包括 end 這個(gè)數(shù)屯蹦，而 to 則不包括 end 這個(gè)數(shù)维哈。

如下代碼，先來(lái)個(gè)使用 through 關(guān)鍵字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
編譯出來(lái)的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

如果是to關(guān)鍵字登澜，就沒(méi)了item-3

順帶說(shuō)一下這個(gè)“-#{$XX}”,這個(gè)是sass的插值阔挠，插入變量值，這樣能讓變量和屬性值變的很完美

接下來(lái)用一個(gè)生成網(wǎng)格的實(shí)例：
···
//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}

//through
@for $i from 1 through 12 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}

//to
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
···

編譯出來(lái)的 CSS:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}

十三脑蠕，插值與變量調(diào)用的關(guān)系