前言

什么是CSS預處理器

定義：

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發(fā)者就只要使用這種語言進行編碼工作。

通俗的說，“CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然后再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加了一些編程的特性，無需考慮瀏覽器的兼容問題”，例如你可以在CSS中使用變量、簡單的邏輯程序、函數(shù)等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳、更易于代碼的維護等諸多好處。

其他CSS預處理器語言：

CSS預處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的CSS預處理器語言（前三者較為流行），比如說：

• Sass（Scss）
• Less
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

如何描述Sass

Sass是一門高于CSS的元語言（可以看一下元編程），它能用來清晰的、結(jié)構(gòu)化地描述文件樣式，有著比普通CSS更加強大的功能。Sass能夠提供更簡潔、更優(yōu)雅的語法，同時提供多種功能來創(chuàng)建可維護和管理的樣式表。

下文中Sass表示sass和scss的統(tǒng)稱，演示方法采取scss新語法，sass則表示Sass舊語法。

sass和scss有什么區(qū)別？

sass和scss其實是同一種東西，我們平時都稱之為Sass，兩者之間的不同在于：

• 文件擴展名不同，sass是“.sass”后綴為擴展名，而scss是以“.scss”后綴為擴展名；

• 語法書寫方式不同，sass是以嚴格的縮進式語法規(guī)則來書寫，也就是說不帶大括號{}和分號，而scss的語法書寫和CSS語法書寫方式非常類似。
  例如：

  • sass語法

    $font-stack: Helvetica, sans-serif  // 定義變量
    $primary-color: #333  // 定義變量
    body 
        font: 100% 
        $font-stack color: $primary-color
    

  • scss語法

    $font-stack: Helvetica, sans-serif;  // 定義變量
    $primary-color: #333;  // 定義變量
    body { 
        font: 100% $font-stack;
        color: $primary-color;
    }
    

  • 編譯后的css

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

sass/scss和純CSS寫法有區(qū)別嗎？

• sass和CSS 寫法有差別：

  sass和CSS寫法的確存在一定的差異，由于sass是基于Ruby寫出來的，所以其延續(xù)了Ruby的書寫規(guī)范。在書寫sass時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的。

• scss和CSS 寫法無差別：

  SCSS和CSS寫法無差別，簡單點說，就是把現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。

sass語法格式

這里說的sass語法是Sass的最初語法格式，它是通過tab鍵控制縮進的一種語法規(guī)則，而且這種縮進要求非常嚴格，并且不能帶有任何大括號和分號。所以常常把這種格式稱之為Sass老版本，其文件名以“.sass”為擴展名。

例如：

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

用sass的語法格式來寫就是：

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
    font: 100%
    $font-stack color: $primary-color

在整個sass代碼中，是沒有類似CSS中的大括號和分號。

scss語法格式

scss是Sass的新語法格式，從外形上來判斷，它和CSS長得幾乎是一模一樣，代碼都包裹在一堆大括號里，并且末尾結(jié)束處都有一個分號，其文件格式名常常以“.scss”為擴展名。

同樣的CSS代碼：

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

使用scss語法格式將會是下面這樣：

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

這樣的語法格式便于經(jīng)常使用CSS的程序員。

但是不管是sass的語法格式還是scss的語法格式，它們的功能都是一樣的，不同的只是書寫格式和文件擴展名。

下面是對比圖：

Sass命令編譯

命令編譯指的是使用電腦中的命令終端，通過輸入Sass指令來編譯Sass，這種編譯方式是最直接也是最簡單的一種方式，因為只需要在你的命令終端輸入：

單文件編譯：

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

這是對一個單文件進行編譯，如果想對整個項目所有Sass文件編譯成CSS文件，可以這樣操作：

多文件編譯：

sass sass/:css/

上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些CSS文件都放在項目中“CSS”文件夾中。

缺點以及解決方法：

在實際編譯過程中，你會發(fā)現(xiàn)上面的命令，只能一次性編譯。每次個性保存“.scss”文件之后，都得重新執(zhí)行一次這樣的命令，這樣操作太麻煩，所以在編譯Sass的時候，可以開啟“watch”功能，這樣只要你的代碼進行過任何保存修改，都能自動監(jiān)測到代碼的變化，并且直接編譯出來。

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

當然，使用Sass命令編譯時，可以帶很多的參數(shù)：

watch 舉例：
假設本地有一個項目，要將項目中的“bootstrap.scss”編譯出“bootstrap.css”文件，并且將編譯出來的文件放在“css”文件夾中，那么可以在命令終端執(zhí)行：

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

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

Sass不同樣式風格的輸出方法

sass --watch test.scss:test.css --style nested/expanded/compact/compressed
style后面就是輸出方法

• 嵌套輸出方式 nested

  
  

• 展開輸出方式 expanded

  
  

  這個輸出的CSS樣式風格和nested類似，只是大括號需要再另起一行。

• 緊湊輸出方式 compact

  
  

  這個方式適合喜歡單行CSS樣式的人。

• 壓縮輸出方式 compressed

  
  

  壓縮輸出方式會去掉標準的Sass和CSS注釋以及空格。

Sass基礎(chǔ)語法

變量

Sass的變量包括三個部分：

• 聲明變量的符號“$”
• 變量名稱
• 賦予變量的值

普通變量和默認變量

普通變量

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

$fontSize: 12px;
body {
    font-size:$fontSize;
}

編譯后的CSS代碼：

body {
    font-size:12px;
}

默認變量

Sass的默認變量僅需要在值后面加上!default即可。

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

編譯后的css代碼：

body {
    line-height:1.5;
}

SASS的默認變量一般是用來設置默認值，然后根據(jù)需求來覆蓋的。覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。

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

編譯后的CSS代碼：

body { 
    line-height:2;
}

變量的調(diào)用

在Sass中聲明了變量之后，就可以在需要的地方調(diào)用變量。調(diào)用變量的方法也很簡單。

例如定義了變量：

$brand-primary : darken(#428bca, 6.5%) !default;   // #337ab7 
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

在按鈕button中調(diào)用，可以按下面的方式調(diào)用：

.btn-primary {
    background-color: $btn-primary-bg; 
    color: $btn-primary-color; 
    border: 1px solid $btn-primary-border;
}

編譯出來的CSS：

.btn-primary { 
    background-color: #337ab7; 
    color: #fff; 
    border: 1px solid #2e6da4;
}

全局變量和局部變量

• 什么是全局變量？
  在選擇器、函數(shù)、混合宏...的外面定義的變量為全局變量。
  全局變量就是定義在元素外面的變量。

  例如：

  $color: orange !default  // 定義全局變量
  .block { 
      color: $color;  // 調(diào)用全局變量
  }
  em { 
      $color: red;  // 定義局部變量
      a
        {
            color: $color;  // 調(diào)用局部變量
        }
  }
  span {
      color: $color;  // 調(diào)用全局變量
  }
  

• 什么是局部變量

  當在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個已經(jīng)存在于全局范圍內(nèi)的變量時，局部變量就成為了全部變量的影子?；旧?，局部變量只會在局部范圍內(nèi)覆蓋全局變量。

Sass中變量的概念與其他CSS預處理器不一致，例如：

• 在Sass 3.4.0之前，Sass可以說是沒有局部變量和全局變量之分的，即后聲明的同名變量總是會覆蓋之前的同名變量，不管后聲明的變量是位于何處。

  Sass官網(wǎng)上 3.4.0版本的 Backwards Incompatibilities – Must Read! 中有這樣一條：

  All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

  沒有位于第一層（全局）的變量聲明現(xiàn)在都被默認為是局部的。如果存在一個同名的全局變量，這個全局變量也不會被重寫，除非同名的局部變量被聲明時使用關(guān)鍵字!default。

• Less 中的變量和其他編程語言一樣，可以實現(xiàn)值的復用，同樣它也有作用域（scope）。簡單的講，變量作用域就是局部變量和全局變量的概念。

嵌套

Sass有三種嵌套方式：

• 選擇器嵌套
• 屬性嵌套
• 偽類嵌套

選擇器嵌套

/* Sass */
nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

/* css */
nav a {
    color:red;
}
header nav a {
    color:green;
}

屬性嵌套

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

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

偽類嵌套

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

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

混合宏

@mixin是用來聲明混合宏的關(guān)鍵詞，@include調(diào)用聲明好的混合宏。

/* 不帶參數(shù)的混合宏 */
@mixin border-radius{  
    -webkit-border-radius: 5px; 
    border-radius: 5px;
}  
/* 帶參數(shù)的混合宏 */
@mixin border-radius($radius:5px){ 
    -webkit-border-radius: $radius; 
    border-radius: $radius;
}

還有復雜的混合宏：

@mixin box-shadow($shadow...) {   // 帶有多個參數(shù)，這個時候可以用"..."來替代
    @if length($shadow) >= 1 { 
        @include prefixer(box-shadow, $shadow); 
     } @else{ 
        $shadow:0 0 4px rgba(0,0,0,.3); 
        @include prefixer(box-shadow, $shadow); 
    }
}

混合宏的參數(shù)

1. 傳一個不帶值的參數(shù)

   在混合宏中，可以傳一個不帶任何值的參數(shù)，例如：

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

   在混合宏“border-radius”中定義了一個不帶任何值的參數(shù)“$radius”，在調(diào)用的時候可以給這個混合宏傳一個參數(shù)值：

   .box { 
       @include border-radius(3px);
   }
   

   這里表示給混合宏傳遞了一個“border-radius”的值為“3px”。
   編譯出來的CSS：

   .box { 
         -webkit-border-radius: 3px; 
         border-radius: 3px;
   }
   

2. 傳一個帶值的參數(shù)

   在Sass的混合宏中，還可以給混合宏的參數(shù)傳一個默認值，例如：

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

   在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認值“3px”。
   在調(diào)用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調(diào)用默認的混合宏“border-radius”：

   .btn { 
         @include border-radius;
   }
   

   編譯出來的CSS：

   .btn { 
         -webkit-border-radius: 3px;
         border-radius: 3px;
   }
   

   但有的時候，頁面中有些元素的圓角值不一樣，那么可以隨機給混合宏傳值，例如：

   .box { 
         @include border-radius(50%);
   }
   

   編譯出來的CSS：

   .box { 
         -webkit-border-radius: 50%; 
         border-radius: 50%;
   }
   

3. 傳多個參數(shù)
   Sass混合宏除了能傳一個參數(shù)之外，還可以傳多個參數(shù)，例如：

   @mixin center($width,$height) {
         width: $width; 
         height: $height; 
         position: absolute; 
         top: 50%; 
         left: 50%; 
         margin-top: -($height) / 2; 
         margin-left: -($width) / 2;
   }
   

   在混合宏“center”就傳了多個參數(shù)。
   并且在實際調(diào)用和調(diào)用其他混合宏是一樣的：

   .box-center { 
         @include center(500px,300px);
   }
   

   編譯出來的CSS：

   .box-center { 
         width: 500px; 
         height: 300px; 
         position: absolute; 
         top: 50%; 
         left: 50%; 
         margin-top: -150px; 
         margin-left: -250px;
   }
   

   有一個特別的參數(shù)“…”，當混合宏傳的參數(shù)過多的時候，可以使用該參數(shù)來替代，例如：

   @mixin box-shadow($shadows...){ 
         @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; 
         }
   }
   

   在實際調(diào)用中：

   .box { 
         @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
   }
   

   編譯出來的CSS：

   .box { 
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
   }
   

   混合宏會生成冗余的代碼塊，Sass在調(diào)用相同的混合宏時，并不能智能地將相同的樣式代碼塊合并在一起。

Sass擴展和繼承

Sass中是通過關(guān)鍵詞“@extend”來繼承已存在的類樣式塊，在Sass中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的CSS將會把選擇器合并在一起，形成組合選擇器。

例如：

.btn { 
      border: 1px solid #ccc; 
      padding: 6px 10px; 
      font-size: 14px;
}
.btn-primary { 
      background-color: #f36; 
      color: #fff; 
      @extend .btn;
}

.btn-second { 
      background-color: orange; 
      color: #fff; 
      @extend .btn;
}

生成：.btn、.btn-primary、 .btn-second三個相同樣式合并在一起。

.btn, .btn-primary, .btn-second { 
      border: 1px solid #ccc; 
      padding: 6px 10px; 
      font-size: 14px;
}
.btn-primary { 
      background-color: #f36; 
      color: #fff;
}
.btn-second { 
      background-clor: orange; 
      color: #fff;
}

占位符%placeholder

Sass中的占位符%placeholder功能是一個很強大，很實用的一個功能，它可以取代以前CSS中的基類造成的代碼冗余的情況。因為%placeholder聲明的代碼，如果不被@extend調(diào)用的話，不會產(chǎn)生任何代碼。
例如：

%mt5 { 
      margin-top: 5px;
} 
%pt5{ 
      padding-top: 5px;
}

這段代碼沒有被@extend調(diào)用，它沒有產(chǎn)生任何代碼塊，只是靜靜地躺在某個Sass文件中，只有通過@extend調(diào)用才會產(chǎn)生代碼：

%mt5 { 
      margin-top: 5px;
}
%pt5{ 
      padding-top: 5px;
}
.btn { 
      @extend %mt5; 
      @extend %pt5;
}
.block { 
      @extend %mt5; 
      span { 
          @extend %pt5; 
      }
}

編譯出來的CSS：

.btn, .block { 
      margin-top: 5px;
}
.btn, .block span { 
      padding-top: 5px;
}

從編譯出來的CSS代碼可以看出，通過@extend調(diào)用的占位符，編譯出來的代碼會將相同代碼合并在一起。

混合宏、繼承、占位符的區(qū)別

Sass插值#{}

使用CSS預處理器語言的一個主要原因是想使用Sass獲得一個更好的結(jié)構(gòu)體系。例如說想要寫更干凈的、高效和面向?qū)ο?/strong>的CSS。Sass中的插值(Interpolation)就是重要的一部分。

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

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

@mixin generate-sizes($class, $small, $medium, $big) { 
      .#{$class}-small { font-size: $small; } 
      .#{$class}-medium { font-size: $medium; } 
      .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

.header-text-small { 
    font-size: 12px; 
}
.header-text-medium { 
    font-size: 20px; 
}
.header-text-big { 
    font-size: 40px; 
}

一旦發(fā)現(xiàn)這一點，就會想到用`mixins`來生成代碼或是另一個`mixins`，但是會有限制，可能會刪除用於Sass變量的插值。
例如：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) { 
      margin-top: $margin-#{$size};
}
.login-box { 
      @include set-value(big);
}

error style.scss (Line 5: Undefined variable: “$margin-".)

@mixin updated-status { 
      margin-top: 20px; 
      background: #F00;
}
$flag: "status";
.navigation { 
      @include updated-#{$flag};
}

error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")

%updated-status { 
      margin-top: 20px; 
      background: #F00;
}
.selected-status {
      font-weight: bold;
}
$flag: "status";.navigation { 
      @extend %updated-#{$flag}; 
      @extend .selected-#{$flag};
}

.navigation { 
      margin-top: 20px; 
      background: #F00;
}
.selected-status, .navigation { 
      font-weight: bold;
}

@mixin firefox-message($selector) { 
      body.firefox #{$selector}:before { 
         content: "Hi, Firefox users!"; 
      }
}
@include firefox-message(".header");

body.firefox .header:before { 
      content: "Hi, Firefox users!"; 
}

margin: 10px 15px 0 0;

font-face: Helvetica, Arial, sans-serif;

.box { 
    width: 20px + 8in;
}

.box { 
    width: 788px;
}

.box {
  width: 20px + 1em;
}

$full-width: 960px;
$sidebar-width: 200px;
.content { 
    width: $full-width **-** $sidebar-width;
}

.content { 
    width: 760px;
}

.box { 
    width:10px * 2px; 
}

.box { 
    width: 10px * 2;
}

.box { 
    width: 20px;
}

.box { 
    width: 20px * 2em;
}

p { 
      font: 10px/8px;  // 純CSS，不是除法運算 
      $width: 1000px; 
      width: $width/2;  // 使用了變量，是除法運算 
      width: round(1.5)/2;  // 使用了函數(shù)，是除法運算 
      height: (500px/2);  // 使用了圓括號，是除法運算 
      margin-left: 5px + 8px/2px;  // 使用了加號（+），是除法運算
}

p {
      font: 10px/8px; 
      width: 500px; 
      height: 250px; 
      margin-left: 9px; 
}

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container { 
      width: $content-width + $sidebar-width + $gutter; 
      margin: 0 auto;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.box {
      width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

.box {
      width: 60px;
}

p { 
      color: #010203 + #040506;
}

p { 
      color: #050709;
}

p { 
      color: #010203 * 2;
}

p { 
      color: #020406;
}

p {
      color: rgba(178, 34, 34, 0.54) + rgba(178, 34, 34, 0.54);
}

p {
      color: rgba(255, 68, 68, 0.54);   // R超過255所以顯示255，G和B的值都相加，A=0.54不變
}

p {
      color: rgba(178, 34, 34, 0.34) + rgba(131, 23, 24, 0.54);
}

$content: "Hello" + "" + "Sass!";
.box:before { 
    content: " #{$content} ";
}

.box:before { 
    content: " Hello Sass! ";
}

div { 
    cursor: e + -resize;
}

div { 
    cursor: e-resize;
}

p:before { 
    content: "Foo " + Bar; font-family: sans- + "serif";
}

p:before {  
    content: "Foo Bar"; 
    font-family: sans-serif;
}

@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);
}

.block { 
    display: block;
}
.hidden { 
    display: none;
}

.item-1 { width: 2em;}
.item-2 { width: 4em;}
.item-3 { width: 6em;}

.item-#{$i} { width: 2em * $i; }

.item-1 { width: 2em;}
.item-2 { width: 4em;}