一、scss是什么恳蹲？

Sass 有兩種語(yǔ)法格式峡懈。首先是 SCSS (Sassy CSS) ,也是本參考資料示例所使用的格式 , 這種格式僅在 CSS3 語(yǔ)法的基礎(chǔ)上進(jìn)行擴(kuò)展，這意味著每個(gè)CSS樣式表是一個(gè)同等的SCSS文件腺律。此外奕短，SCSS 也支持大多數(shù) CSS hacks 寫法 以及瀏覽器專屬前綴語(yǔ)法 (vendor-specific syntax)宜肉，例如匀钧，IE 古老的 filter 語(yǔ)法。 這種語(yǔ)法的樣式表文件需要以 .scss 作為拓展名谬返。
另一種之斯，也是最早的語(yǔ)法，被稱為縮進(jìn)語(yǔ)法 (Indented Sass)遣铝，或者通常說(shuō)的 "Sass"佑刷，它提供了一種更加簡(jiǎn)介的方式來(lái)書寫CSS。它使用縮進(jìn)而不是花括號(hào)來(lái)表示選擇器的嵌套酿炸，用換行而不是分號(hào)來(lái)分隔屬性瘫絮，一些人認(rèn)為這樣做比 SCSS 更容易閱讀，書寫也更快速填硕。 縮排語(yǔ)法具有 Sass 的所有特色功能麦萤， 雖然有些語(yǔ)法上稍有差異； 具體差異在縮進(jìn)語(yǔ)法參考中都有描述扁眯。 使用此種語(yǔ)法的樣式表文件需要以 .sass 作為擴(kuò)展名壮莹。

二、引用父選擇器:&

有些時(shí)候需要直接使用嵌套外層的父選擇器姻檀，這個(gè)就很有用了命满，例如，你可能喜歡給選擇器指定 hover樣式绣版，或者當(dāng)body元素具有某個(gè)樣式時(shí)胶台，在這些情況下，你可以 & 字符來(lái)明確地表示插入指定父選擇器杂抽。 例如：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
編譯為：
a {
   font-weight: bold;
   text-decoration: none;
 }
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
 }

&將替換為呈現(xiàn)在CSS文件中的父選擇器诈唬。這意味著，如果你有一個(gè)多層嵌套的規(guī)則默怨，父選擇器將在被&替換之前完全分解讯榕。 例如：

.main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
編譯成：
.main {
  color: black; 
}
.main a {
    font-weight: bold;
 }
.main a:hover {
      color: red;
 }

& 必須出現(xiàn)在的選擇器的開頭位置（注：也就是作為選擇器的第一個(gè)字符），但可以跟隨后綴匙睹，將被添加到父選擇的后面愚屁。 例如：

.main {
  color: black;
  &-sidebar { border: 1px solid; }
}
編譯為：
.main {
  color: black; 
}
.main-sidebar {
    border: 1px solid;
 }

三、嵌套屬性

CSS中有一些屬性遵循相同的“命名空間”痕檬；比如霎槐，font-family, font-size, 和 font-weight都在font命名空間中。在CSS中梦谜，如果你想在同一個(gè)命名空間中設(shè)置一串屬性丘跌，你必須每次都輸出來(lái)袭景。Sass為此提供了一個(gè)快捷方式：只需要輸入一次命名空間，然后在其內(nèi)部嵌套子屬性闭树。例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
編譯為：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
 }

命名空間也可以有自己的屬性值耸棒。例如：

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
編譯為：
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

四、變量 $

SassScript 最普遍的用法就是變量报辱，變量以美元符號(hào)開頭与殃，賦值方法與 CSS 屬性的寫法一樣：

$width: 5em;

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

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

.sidebar {
  width: $width;
}

五、數(shù)據(jù)類型

SassScript 支持 6 種主要的數(shù)據(jù)類型：
數(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)

六、運(yùn)算

所有數(shù)據(jù)類型均支持相等運(yùn)算 == 或 !=慢睡，此外逐工，每種數(shù)據(jù)類型也有其各自支持的運(yùn)算方式。
SassScript 支持?jǐn)?shù)字的加減乘除一睁、取整等運(yùn)算 (+, -, *, /, %)钻弄，如果必要會(huì)在不同單位間轉(zhuǎn)換值。
如果需要使用變量者吁，同時(shí)又要確保 / 不做除法運(yùn)算而是完整地編譯到 CSS 文件中窘俺，只需要用 #{} 插值語(yǔ)句將變量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
編譯為
p {
  font: 12px/30px; 
}

運(yùn)算注意事項(xiàng)：

以下三種情況 / 將被視為除法運(yùn)算符號(hào)：

• 如果值复凳，或值的一部分瘤泪，是變量或者函數(shù)的返回值
• 如果值被圓括號(hào)包裹
• 如果值是算數(shù)表達(dá)式的一部分

如果需要使用變量，同時(shí)又要確保 / 不做除法運(yùn)算而是完整地編譯到 CSS 文件中育八，只需要用 #{} 插值語(yǔ)句將變量包裹对途。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
編譯為
p {
  font: 12px/30px;
}

字符串運(yùn)算

“+” 號(hào)可用于連接字符串

p {
  cursor: e + -resize;
}
編譯為
p {
  cursor: e-resize;
}

注意：字符串在“+”號(hào)左邊，編譯的結(jié)果會(huì)帶引號(hào)髓棋，字符串在“+”號(hào)右側(cè)实檀，編譯的結(jié)果不會(huì)帶引號(hào)。

嵌套 @import

大多數(shù)情況下按声，一般在文件的最外層（不在嵌套規(guī)則內(nèi)）使用 @import膳犹，其實(shí)，也可以將 @import 嵌套進(jìn) CSS 樣式或者 @media 中签则，與平時(shí)的用法效果相同须床，只是這樣導(dǎo)入的樣式只能出現(xiàn)在嵌套的層中。

假設(shè) example.scss 文件包含以下樣式：

.example {
  color: red;
}
然后導(dǎo)入到 .main 樣式內(nèi)
.main {
  @import "example";
}
編譯為
.main .example {
  color: red;
}

@extend

在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候常常遇到這種情況：一個(gè)元素使用的樣式與另一個(gè)元素完全相同渐裂，但又添加了額外的樣式豺旬。通常會(huì)在 HTML 中給元素定義兩個(gè) class钠惩，一個(gè)通用樣式，一個(gè)特殊樣式族阅。假設(shè)現(xiàn)在要設(shè)計(jì)一個(gè)普通錯(cuò)誤樣式與一個(gè)嚴(yán)重錯(cuò)誤樣式篓跛，一般會(huì)這樣寫：

<div class="error seriousError">
  Oh no! You've been hacked!
</div>
樣式如下
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

麻煩的是，這樣做必須時(shí)刻記住使用 .seriousError 時(shí)需要參考 .error 的樣式耘分，帶來(lái)了很多不變：智能比如加重維護(hù)負(fù)擔(dān)举塔，導(dǎo)致 bug，或者給 HTML 添加無(wú)語(yǔ)意的樣式求泰。使用 @extend 可以避免上述情況，告訴 Sass 將一個(gè)選擇器下的所有樣式繼承給另一個(gè)選擇器计盒。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

上面代碼的意思是將 .error 下的所有樣式繼承給 .seriousError渴频，border-width: 3px; 是單獨(dú)給 .seriousError 設(shè)定特殊樣式，這樣北启，使用 .seriousError 的地方可以不再使用 .error卜朗。

@extend-Only 選擇器 (@extend-Only Selectors)

有時(shí)，需要定義一套樣式并不是給某個(gè)元素用咕村，而是只通過(guò) @extend 指令使用场钉，尤其是在制作 Sass 樣式庫(kù)的時(shí)候，希望 Sass 能夠忽略用不到的樣式懈涛。
如果使用普通的 CSS 規(guī)則逛万，最后會(huì)編譯出很多用不到的樣式，也容易與其他樣式名沖突批钠，所以宇植，Sass 引入了“占位符選擇器” (placeholder selectors)，看起來(lái)很像普通的 id 或 class 選擇器埋心，只是 # 或 . 被替換成了 %指郁。可以像 class 或者 id 選擇器那樣使用拷呆，當(dāng)它們單獨(dú)使用時(shí)闲坎，不會(huì)被編譯到 CSS 文件中。

.context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
占位符選擇器需要通過(guò)延伸指令使用茬斧，用法與 class 或者 id 選擇器一樣腰懂，被延伸后，占位符選擇器本身不會(huì)被編譯啥供。
.notice {
  @extend %extreme;
}
編譯為
.context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

!optional 聲明 (The !optional Flag)

如果 @extend 失敗會(huì)收到錯(cuò)誤提示悯恍，比如，這樣寫 a.important {@extend .notice}伙狐，當(dāng)沒有 .notice 選擇器時(shí)涮毫，將會(huì)報(bào)錯(cuò)瞬欧，只有 h1.notice 包含 .notice 時(shí)也會(huì)報(bào)錯(cuò)，因?yàn)?h1 與 a 沖突罢防，會(huì)生成新的選擇器艘虎。
如果要求 @extend 不生成新選擇器，可以通過(guò) !optional 聲明達(dá)到這個(gè)目的咒吐，例如：

a.important {
  @extend .notice !optional;
}

@if

當(dāng)@if 的表達(dá)式返回值不是 false 或者 null 時(shí)野建，條件成立，輸出 {} 內(nèi)的代碼：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
編譯為

p {
  border: 1px solid;
}

@if 聲明后面可以跟多個(gè) @else if 聲明恬叹，或者一個(gè) @else 聲明候生。如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明绽昼，如果全部失敗唯鸭，最后執(zhí)行 @else 聲明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
編譯為

p {
  color: green;
}

七硅确、@for

@for 指令可以在限制的范圍內(nèi)重復(fù)輸出格式目溉，每次按要求（變量的值）對(duì)輸出結(jié)果做出變動(dòng)。這個(gè)指令包含兩種格式：@for var from <start> to <end>缭付，區(qū)別在于 through 與 to 的含義：當(dāng)使用 through 時(shí)，條件范圍包含 <start> 與 <end> 的值循未，而使用 to 時(shí)條件范圍只包含 <start> 的值不包含 <end> 的值陷猫。另外，i烙丛；<start> 和 <end> 必須是整數(shù)值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
編譯為
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

八羔味、@each

image.png

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
編譯為
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

九河咽、@while

@while 指令重復(fù)輸出格式直到表達(dá)式返回結(jié)果為 false。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)赋元，只是很少會(huì)用到忘蟹。例如：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

混合指令

混合指令 (Mixin Directives)
混合指令（Mixin）用于定義可重復(fù)使用的樣式，避免了使用無(wú)語(yǔ)意的 class搁凸，比如 .float-left媚值。混合指令可以包含所有的 CSS 規(guī)則护糖，絕大部分 Sass 規(guī)則褥芒，甚至通過(guò)參數(shù)功能引入變量，輸出多樣化的樣式。
定義混合指令 @mixin (Defining a Mixin: @mixin)
混合指令的用法是在 @mixin 后添加名稱與樣式锰扶，比如名為 large-text 的混合通過(guò)下面的代碼定義：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用混合樣式 @include (Including a Mixin: @include)
使用 @include 指令引用混合樣式献酗，格式是在其后添加混合名稱，以及需要的參數(shù)（可選）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
編譯為

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

也可以在最外層引用混合樣式坷牛，不會(huì)直接定義屬性罕偎，也不可以使用父選擇器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

編譯為:
a {
  color: blue;
  background-color: red;
}