摘要：核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉(zhuǎn)換為全局變量可以添加聲明編譯為默認(rèn)變量的默認(rèn)變量?jī)H需要在值后面加上即可。

SASS是一種CSS的開(kāi)發(fā)工具，提供了許多便利的寫(xiě)法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開(kāi)發(fā)，變得簡(jiǎn)單和可維護(hù)。世界上最成熟、最穩(wěn)定、最強(qiáng)大的專(zhuān)業(yè)級(jí)CSS擴(kuò)展語(yǔ)言！

兼容CSS:
Sass完全兼容所有版本的CSS。我們對(duì)此嚴(yán)格把控，所以你可以無(wú)縫地使用任何可用的CSS庫(kù)。
特性豐富:
Sass擁有比其他任何CSS擴(kuò)展語(yǔ)言更多的功能和特性。Sass核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。

sass和scss兩種方法：

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

完全兼容 CSS3

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

通過(guò)函數(shù)進(jìn)行顏色值與屬性值的運(yùn)算

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

自定義輸出格式

簡(jiǎn)單的嵌套如下：

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

會(huì)被編譯成如下css：

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

其中每一級(jí)都可以使用正常的css樣式選擇器，包括基本類(lèi)型選擇器、結(jié)合選擇器、偽類(lèi)選擇器、偽元素選擇器。

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以后就可以定義占位選擇器%。這種選擇器的優(yōu)勢(shì)在于：如果不調(diào)用則不會(huì)有任何多余的css文件，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式，然后實(shí)際應(yīng)用中不管是否使用了@extend去繼承相應(yīng)的樣式，都會(huì)解析出來(lái)所有的樣式。占位選擇器以%標(biāo)識(shí)定義，通過(guò)@extend調(diào)用。

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

編譯后的結(jié)果：

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

如上代碼，定義了兩個(gè)占位選擇器%ir和%clearfix，其中%clearfix這個(gè)沒(méi)有調(diào)用，所以解析出來(lái)的css樣式也就沒(méi)有clearfix部分。占位選擇器的出現(xiàn)，使css文件更加簡(jiǎn)練可控，沒(méi)有多余。所以可以用其定義一些基礎(chǔ)的樣式文件，然后根據(jù)需要調(diào)用產(chǎn)生相應(yīng)的css。
ps：在@media中暫時(shí)不能@extend @media外的代碼片段，以后將會(huì)可以。

多行注釋 /* */

單行注釋 //

sass的導(dǎo)入(@import)規(guī)則和CSS的有所不同，編譯時(shí)會(huì)將@import的scss文件合并進(jìn)來(lái)只生成一個(gè)CSS文件。但是如果你在sass文件中導(dǎo)入css文件如@import "reset.css"，那效果跟普通CSS導(dǎo)入樣式文件一樣，導(dǎo)入的css文件不會(huì)合并到編譯后的文件中，而是以@import方式存在。
所有的sass導(dǎo)入文件都可以忽略后綴名.scss。一般來(lái)說(shuō)基礎(chǔ)的文件命名方法以_開(kāi)頭，如_mixin.scss。這種文件在導(dǎo)入的時(shí)候可以不寫(xiě)下劃線，可寫(xiě)成@import "mixin"。

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

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

轉(zhuǎn)譯出來(lái)的b.css樣式：

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

根據(jù)上面的代碼可以看出，b.scss編譯后，reset.css繼續(xù)保持import的方式，而a.scss則被整合進(jìn)來(lái)了。

在 CSS 屬性的基礎(chǔ)上 Sass 提供了一些名為 SassScript 的新功能。 SassScript 可作用于任何屬性，允許屬性使用變量、算數(shù)運(yùn)算等額外功能。
通過(guò) interpolation，SassScript 甚至可以生成選擇器或?qū)傩悦?，這一點(diǎn)對(duì)編寫(xiě) mixin 有很大幫助。

變量以美元符號(hào)開(kāi)頭，賦值方法與 CSS 屬性的寫(xiě)法一樣：

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

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

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

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

#sidebar {
  width: 5em;
}

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

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

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

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

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

SassScript 支持 6 種主要的數(shù)據(jù)類(lèi)型：

數(shù)字，1, 2, 13, 10px

字符串，有引號(hào)字符串與無(wú)引號(hào)字符串，"foo", "bar", baz

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

布爾型，true, false

空值，null

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

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

所有數(shù)據(jù)類(lèi)型均支持相等運(yùn)算 == 或 !=，此外，每種數(shù)據(jù)類(lèi)型也有其各自支持的運(yùn)算方式。

其中數(shù)字運(yùn)算可以使用，SassScript 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)，如果必要會(huì)在不同單位間轉(zhuǎn)換值。關(guān)系運(yùn)算 <, >, <=, >= 也可用于數(shù)字運(yùn)算，相等運(yùn)算 ==, != 可用于所有數(shù)據(jù)類(lèi)型。

/ 在 CSS 中通常起到分隔數(shù)字的用途，SassScript 作為 CSS 語(yǔ)言的拓展當(dāng)然也支持這個(gè)功能，同時(shí)也賦予了 / 除法運(yùn)算的功能。也就是說(shuō)，如果 / 在 SassScript 中把兩個(gè)數(shù)字分隔，編譯后的 CSS 文件中也是同樣的作用。以下三種情況 / 將被視為除法運(yùn)算符號(hào)：

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

如果值被圓括號(hào)包裹

如果值是算數(shù)表達(dá)式的一部分

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

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

字符串運(yùn)算 (String Operations):如果有引號(hào)字符串（位于 + 左側(cè)）連接無(wú)引號(hào)字符串，運(yùn)算結(jié)果是有引號(hào)的，相反，無(wú)引號(hào)字符串（位于 + 左側(cè)）連接有引號(hào)字符串，運(yùn)算結(jié)果則沒(méi)有引號(hào)。

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

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

@import的使用

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

文件拓展名是 .css；

文件名以 http:// 開(kāi)頭；

文件名是 url()；

@import 包含 media queries。

@extend

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

有時(shí)會(huì)遇到復(fù)雜的情況，比如選擇器列中的某個(gè)元素需要延伸給另一個(gè)選擇器列，這種情況下，兩個(gè)選擇器列需要合并，

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

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

一般的模式是一個(gè)index.scss入口文件來(lái)不斷的引入@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
基礎(chǔ)樣式
//m-head.scss
頁(yè)面頭部
//m-body.scss
頁(yè)面中間
//m-foot.scss
頁(yè)面底部

需要注意：

所有的scss都會(huì)被引入到index.scss內(nèi)，然后一起編譯；

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

如果頁(yè)面樣式的頭部重新定義了mixin、變量將會(huì)發(fā)生覆蓋；

本文僅僅是一個(gè)學(xué)習(xí)筆記，比較的雜亂

所有的全局方法