最近一直被各種安利 Sass 的使用，正好 Laravel5.3 也已經高度集成，所以剛好學習，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 語法的設計者，Natalie Weizenbaum 則是一位 Google 的工程師，正在為 Google 改進 Dart 語言
Sass 是一套 CSS 的編寫規則，然后經過工具的編譯可以成為瀏覽器可以識別的 CSS 文件，Sass 發源于 Ruby 社區，最開始是基于 Ruby 做的實現，現在已經轉向了 C/C++ 實現的 LibSass，Laravel 默認是選擇用 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，從維護頻率上來看已經相當穩定了，3.5 版本和 4 版本也都在緊鑼密鼓中
導入：
@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 名字，使用更直觀的層次感表現出來
混合：
@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);
}
一種看似函數的形式，來對重復性的內容進行簡化
繼承：
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
函數：
// 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%);
}
運算：
$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;
條件判斷及循環：
$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;
}
}