最近一直被各種安利 Sass 的使用，正好 Laravel5.3 也已經(jīng)高度集成，所以剛好學(xué)習(xí)，Wikipedia 上對于 Sass 的定義：

Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.

Hampton Catlin 也是 Haml 語法的設(shè)計(jì)者，Natalie Weizenbaum 則是一位 Google 的工程師，正在為 Google 改進(jìn) Dart 語言

Sass 是一套 CSS 的編寫規(guī)則，然后經(jīng)過工具的編譯可以成為瀏覽器可以識別的 CSS 文件，Sass 發(fā)源于 Ruby 社區(qū)，最開始是基于 Ruby 做的實(shí)現(xiàn)，現(xiàn)在已經(jīng)轉(zhuǎn)向了 C/C++ 實(shí)現(xiàn)的 LibSass，Laravel 默認(rèn)是選擇用 nodejs 的 node-sass（ gulp 基于 node-sass，node-sass 基于 LibSass）：
https://github.com/gulpjs/gulp
https://github.com/sass/node-sass
https://github.com/sass/libsass

目前 Sass 最新版本是 3.4.22，從維護(hù)頻率上來看已經(jīng)相當(dāng)穩(wěn)定了，3.5 版本和 4 版本也都在緊鑼密鼓中

導(dǎo)入：

@import "reset.css";

變量：

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

嵌套：

#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 名字，使用更直觀的層次感表現(xiàn)出來

混合：

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

一種看似函數(shù)的形式，來對重復(fù)性的內(nèi)容進(jìn)行簡化

繼承：

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

函數(shù)：

// 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%);
}

運(yùn)算：

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

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

$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;
  }
}