摘要：核心團隊不懈努力，一直使其保持領先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉換為全局變量可以添加聲明編譯為默認變量的默認變量僅需要在值后面加上即可。

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。世界上最成熟、最穩定、最強大的專業級CSS擴展語言！

兼容CSS:
Sass完全兼容所有版本的CSS。我們對此嚴格把控，所以你可以無縫地使用任何可用的CSS庫。
特性豐富:
Sass擁有比其他任何CSS擴展語言更多的功能和特性。Sass核心團隊不懈努力，一直使其保持領先地位。

sass和scss兩種方法：

Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為拓展名。
另一種也是最早的 Sass 語法格式，被稱為縮進格式 (Indented Sass) 通常簡稱 "Sass"，是一種簡化格式。它使用 “縮進” 代替 “花括號” 表示屬性屬于某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方采取了不同的表達方式，具體請查看 the indented syntax reference。這種格式以 .sass 作為拓展名。

完全兼容 CSS3

在 CSS 基礎上增加變量、嵌套 (nesting)、混合 (mixins) 等功能

通過函數進行顏色值與屬性值的運算

提供控制指令 (control directives)等高級功能

自定義輸出格式

簡單的嵌套如下：

body{
    font-size: 12px;
    footer{
        color: red;
    }
}

會被編譯成如下css：

body{
    font-size: 12px;
}
body footer{
    color: red;
}

其中每一級都可以使用正常的css樣式選擇器，包括基本類型選擇器、結合選擇器、偽類選擇器、偽元素選擇器。

body{
    &.app{
        font-size: 12px;
    }
}

編譯成 自身選擇器：

body.app{
        font-size: 12px;
    }

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

編譯為

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

從sass 3.2.0以后就可以定義占位選擇器%。這種選擇器的優勢在于：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以%標識定義，通過@extend調用。

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
    clear: both;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

編譯后的結果：

#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代碼，定義了兩個占位選擇器%ir和%clearfix，其中%clearfix這個沒有調用，所以解析出來的css樣式也就沒有clearfix部分。占位選擇器的出現，使css文件更加簡練可控，沒有多余。所以可以用其定義一些基礎的樣式文件，然后根據需要調用產生相應的css。
ps：在@media中暫時不能@extend @media外的代碼片段，以后將會可以。

多行注釋 /* */

單行注釋 //

sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合并進來只生成一個CSS文件。但是如果你在sass文件中導入css文件如@import "reset.css"，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中，而是以@import方式存在。
所有的sass導入文件都可以忽略后綴名.scss。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。

//被導入sass文件a.scss：
//a.scss
//-------------------------------
body {
  background: #eee;
}

//需要導入樣式的sass文件b.scss：
@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

轉譯出來的b.css樣式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

根據上面的代碼可以看出，b.scss編譯后，reset.css繼續保持import的方式，而a.scss則被整合進來了。

在 CSS 屬性的基礎上 Sass 提供了一些名為 SassScript 的新功能。 SassScript 可作用于任何屬性，允許屬性使用變量、算數運算等額外功能。
通過 interpolation，SassScript 甚至可以生成選擇器或屬性名，這一點對編寫 mixin 有很大幫助。

變量以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣：

$width: 5em;
//直接使用即調用變量：
#main {
  width: $width;
}

變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加 !global 聲明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
//編譯為
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

sass的默認變量僅需要在值后面加上!default即可。
sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可

$baseLineHeight: 2;
$baseLineHeight:  1.5 !default;

一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應用于class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用于復雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

SassScript 支持 6 種主要的數據類型：

數字，1, 2, 13, 10px

字符串，有引號字符串與無引號字符串，"foo", "bar", baz

顏色，blue, #04a3f9, rgba(255,0,0,0.5)

布爾型，true, false

空值，null

數組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相當于 JavaScript 的 object，(key1: value1, key2: value2)

所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

其中數字運算可以使用，SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。關系運算 <, >, <=, >= 也可用于數字運算，相等運算 ==, != 可用于所有數據類型。

/ 在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的拓展當然也支持這個功能，同時也賦予了 / 除法運算的功能。也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯后的 CSS 文件中也是同樣的作用。以下三種情況 / 將被視為除法運算符號：

如果值，或值的一部分，是變量或者函數的返回值

如果值被圓括號包裹

如果值是算數表達式的一部分

顏色值運算 (Color Operations):顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值,計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09：

    p {
      color: #010203 + #040506; //#050709
    }

字符串運算 (String Operations):如果有引號字符串（位于 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位于 + 左側）連接有引號字符串，運算結果則沒有引號。

p:before {
 content: "Foo " + Bar;
 font-family: sans- + "serif";
   }
   //編譯為
   p:before {
 content: "Foo Bar";
 font-family: sans-serif;
}
   運算表達式與其他值連用時，用空格做連接符：  
   margin: 3px + 4px auto; // margin: 7px auto;  
   在有引號的文本字符串中使用 #{} 插值語句可以添加動態的值：  
   content: "I ate #{5 + 10} pies!"; //content: "I ate 15 pies!";

布爾運算 (Boolean Operations): SassScript 支持布爾型的 and or 以及 not 運算。

@import的使用

Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合并編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。
通常，@import 尋找 Sass 文件并將其導入，但在以下情況下，@import 僅作為普通的 CSS 語句，不會導入任何 Sass 文件。

文件拓展名是 .css；

文件名以 http:// 開頭；

文件名是 url()；

@import 包含 media queries。

@extend

使用 @extend 可以告訴 Sass 將一個選擇器下的所有樣式繼承給另一個選擇器。可以多次繼承傳遞，
暫時不可以將選擇器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸給其他元素，但是，卻可以將其他元素延伸給選擇器列

有時會遇到復雜的情況，比如選擇器列中的某個元素需要延伸給另一個選擇器列，這種情況下，兩個選擇器列需要合并，

Sass 引入了“占位符選擇器” (placeholder selectors)，看起來很像普通的 id 或 class 選擇器，只是 # 或 . 被替換成了 %。可以像 class 或者 id 選擇器那樣使用，當它們多帶帶使用時，不會被編譯到 CSS 文件中。

類似@each @if @if @for @else if @extend @include等指令完全把css的書寫變得很靈活，可以像正常的編程一樣的去處理樣式。

一般的模式是一個index.scss入口文件來不斷的引入@import其他的模塊，建議的方式：

//index.scss
@charset "utf-8";
@import "./core/veriables.scss";
@import "./core/reset.scss";
@import "./core/mixin.scss";
@import "./core/extend.scss";
@import "./core/base.scss";
@import "./core/m-head.scss";
@import "./core/m-body.scss";
@import "./core/m-fot.scss";

//reset.scss
瀏覽器初始化樣式
//veriables.scss
sass變量
//mixin.scss
mixin指令
//extend.scss
占位符
//base.scss
基礎樣式
//m-head.scss
頁面頭部
//m-body.scss
頁面中間
//m-foot.scss
頁面底部

需要注意：

所有的scss都會被引入到index.scss內，然后一起編譯；

注意作用域，在一些全局模塊定義的變量、指令、占位符可以被其他的頁面樣式模塊引用；

如果頁面樣式的頭部重新定義了mixin、變量將會發生覆蓋；

本文僅僅是一個學習筆記，比較的雜亂

所有的全局方法