摘要：生產環境當中，一般使用最后一個選項。基本上，局部變量只會在局部范圍內覆蓋全局變量。基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。在屬性中取值需要使用的強大之處，在于可以指定參數和缺省值。

SASS 官網（中文）

SASS 官網（英文）

SASS 是什么

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass 是成熟、穩定、強大的 CSS 擴展語言。

SASS 的特點

兼容 CSS 語法、功能豐富、成熟

I. SASS 簡介

是 CSS 的擴展，是 CSS 的預處理。提供了許多便利的寫法，大大節省了設計者的時間，使得 CSS 的開發，變得簡單和可維護。

sass 文件有兩種文件名后綴，分別是 .sass 和 .scss，.sass 是嚴格的嵌套縮進規則，而 .scss 的則是跟寫 css 代碼類似的大括號，分號這樣的語法規則。

CSS 預處理器技術已經非常的成熟，而且也涌現出了很多種不同的 CSS 預處理器語言，比如說：

Sass（SCSS）

LESS

Stylus

Turbine

Swithch CSS

CSS Cacheer

DT CSS

到目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS 和 Stylus 最優秀，討論的也多，對比的也多。

Sass 和 SCSS 區別

Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名

語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

II. SASS 的使用 安裝方法

npm install sass -g

使用方法

sass test.scss [test.css]

sass 在線轉換

sass 編譯風格的選項

SASS 提供四個編譯風格的選項：

nested：嵌套縮進的 css 代碼，它是默認值。

expanded：沒有縮進的、擴展的 css 代碼。

compact：簡潔格式的 css 代碼。

compressed：壓縮后的 css 代碼。

生產環境當中，一般使用最后一個選項。

sass --style compressed test.sass test.css

你也可以讓 SASS 監聽某個文件或目錄，一旦源文件有變動，就自動生成編譯后的版本。

sass --watch input.scss:output.css // watch a file
sass --watch app/sass:public/stylesheets // watch a directory

基本用法

1.數據類型

Sass 和 JavaScript 語言類似，也具有自己的數據類型，在 Sass 中包含以下幾種數據類型：

數字: 如，1、 2、 13、 10px；

字符串：有引號字符串或無引號字符串，如，"foo"、 "bar"、 baz；

顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

布爾型：如，true、 false；

空值：如，null；

值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

字符串

有引號字符串 (quoted strings)，如 "Lucida Grande" 、"http://sass-lang.com"；

無引號字符串 (unquoted strings)，如 sans-serifbold。

使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

2.變量

SASS 允許使用變量，所有變量以$開頭。

$blue: #1875e7;
div {
  color: $blue;
}

如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

$side: left;
.rounded {
  border-#{$side}-radius: 5px;
}

普通變量和默認變量

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

默認變量的價值在進行組件化開發的時候會非常有用。

$fontSize: 14px;
$fontSize: 12px !default;
body {
  font-size: $fontSize;
}
/*普通變量與默認變量*/
body {
  font-size: 14px;
}

局部變量和全局變量

從 3.4 版本開始，Sass 已經可以正確處理作用域的概念

$color: orange !default; //定義全局變量(在選擇器、函數、混合宏...的外面定義的變量為全局變量)
.block {
  color: $color; //調用全局變量
}
em {
  $color: red; //定義局部變量
  a {
    color: $color; //調用局部變量
  }
}
span {
  color: $color; //調用全局變量
}

.block {
  color: orange;
}

em a {
  color: red;
}

span {
  color: orange;
}

全局變量的影子

當在局部范圍（選擇器內、函數內、混合宏內...）聲明一個已經存在于全局范圍內的變量時，局部變量就成為了全局變量的影子。基本上，局部變量只會在局部范圍內覆蓋全局變量。

同上一個例子

什么時候聲明變量？

該值至少重復出現了兩次；

該值至少可能會被更新一次；

該值所有的表現都與變量有關（非巧合）。

基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。

基本用法

3.計算功能

加減乘除都不允許不同單位進行運算

body {
  margin: (14px/2);
  top: 50px + 100px;
}

加法 + 減法

攜帶不同類型的單位時，在 Sass 中計算會報錯

.box {
  width: 20px + 1em;
}

$full-width: 960px;

.content {
  width: $full-width - 1em;
}
// Incompatible units: "em" and ‘px".”

乘法

能夠支持多種單位（比如 em ,px , %）

乘法運算時，兩個值單位相同時，只需要為一個數值提供單位即可

.box {
  width: 10px * 2;
  // width: 10px * 2px 錯誤;
}

除法

在 Sass 中做除法運算時，直接使用“/”符號做為除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯。

這樣的結果對于大家來說沒有任何意義。要修正這個問題，只需要給運算的外面添加一個小括號()

"/" 符號被當作除法運算符時有以下幾種情況：

如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。

如果數值被圓括號包圍。

如果數值是另一個數學表達式的一部分。

p {
  font: 10px/8px; // 純 CSS，不是除法運算
  height: (16px/8px);
  $width: 1000px;
  width: $width/2; // 使用了變量，是除法運算
  width: round(1.5) / 2; // 使用了函數，是除法運算
  height: (500px/2); // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

p {
  font: 10px/8px;
  height: 2;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

除法運算時，如果兩個值帶有相同的單位值時，除法運算之后會得到一個不帶單位的數值。

顏色運算

所有算數運算都支持顏色值，并且是分段運算的。也就是說，紅、綠和藍各顏色分段多帶帶進行運算。

p {
  color: #010203 + #040506; // 01+04 02+05 03+06
  // 考慮顏色函數 未來版本不支持
}

字符運算

在 Sass 中可以通過加法符號“+”來對字符串進行連接。可以連接變量和和字符

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

div {
  cursor: "e" + -resize;
  position: re + "lative";
}

.box:before {
  content: " HelloSass! ";
}

div {
  cursor: "e-resize";
  position: relative;
}

基本用法

4.嵌套

div {
  hi {
    color: red;
  }
}

sass 的嵌套分為 3 種：選擇器嵌套、屬性嵌套、偽類嵌套

選擇器嵌套

& 有 2 種用法：1.替換空格 2.選擇父類

nav {
  a {
    color: red;
    .b {
      & .c {
        font-size: 12px;
      }
      &:hover {
        color: green;
      }
    }
    head & {
      color: green;
    }
  }
}

nav a {
  color: red;
}
nav a .b .c {
  font-size: 12px;
}
nav a .b:hover {
  color: green;
}
head nav a {
  color: green;
}

屬性嵌套

CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。

.box {
  font: {
    size: 12px;
    weight: bold;
  }
}

.box {
  font-size: 12px;
  font-weight: bold;
}

偽類嵌套

.box {
  &:before {
    content: "偽元素嵌套";
  }
}

選擇器嵌套最大的問題是將使最終的代碼難以閱讀，我們應該盡可能避免選擇器嵌套。

基本用法

5.注釋

SASS 共有兩種注釋風格。

標準的 CSS 注釋 /_ comment _/ ，會保留到編譯后的文件。

單行注釋 // comment，只保留在 SASS 源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權信息。

css 代碼的重用

1.繼承

SASS 允許一個選擇器，繼承另一個選擇器。比如，現有 class1：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

要繼承 .btn，就要使用@extend 命令：

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-default {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器：

.btn,
.btn-primary,
.btn-default {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-default {
  background-color: orange;
  color: #fff;
}

css 代碼的重用

2.Mixin(混合宏)

需要重復使用大段的樣式時，使用變量就無法達到我們目目的，這時候可以使用@mixin，定義一個代碼塊。

@mixin left {
  float: left;
  margin-left: 10px;
}

使用@include 命令，調用這個 mixin。

div {
  @include left;
}

使用的時候，根據需要加入參數：

div {
  @include left(20px);
}

下面是一個 mixin 的實例，用來生成瀏覽器前綴。

// 在屬性中取值需要使用 #{}
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded(top, left);
}

#footer {
  @include rounded(top, left, 5px);
}

mixin 的強大之處，在于可以指定參數和缺省值。

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

混合宏除了能傳一個參數之外，還可以傳多個參數

@mixin center($width, $height) {
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px, 300px);
}

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一個特別的參數“…”。當混合宏傳的參數過多之時，可以使用參數來替代，如：

@mixin box-shadow($shadows...) {
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000, 0.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000, 0.5), 0 0 2px rgba(#000, 0.2));
}

.box1 {
  @include box-shadow();
}

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

.box1 {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

混合宏的不足

混合宏在實際編碼中給我們帶來很多方便之處，特別是對于復用重復代碼塊。但其最大的不足之處是會生成冗余的代碼塊。比如在不同的地方調用一個相同的混合宏時。

@mixin border-radius {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  @include border-radius;
  margin-bottom: 5px;
}
.btn {
  @include border-radius;
}

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。

css 代碼的重用

3.占位符%placeholder

他可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。

%mt5 {
  // 沒有被@extent調用就不會被編譯到css中
  margin-top: 5px;
}
%pt5 {
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

通過 @extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。

混合宏 VS 繼承 VS 占位符

css 代碼的重用

3.函數

自備了一系列的函數功能。其主要包括：

字符串函數

數字函數

列表函數

顏色函數

Introspection 函數

三元函數等

字符串函數

unquote($string) : Removes quotes from a string.

quote($string) : Adds quotes to a string.

to-lower-case($string) : Converts a string to lower case.

數字函數

round($number) : Rounds a number to the nearest whole number.

ceil($number) : Rounds a number up to the next whole number.

floor($number) : Rounds a number down to the previous whole number.

列表函數

join($list1, $list2, [$separator, $bracketed]) : Joins together two lists into one.

append($list1, $val, [$separator]) : Appends a single value onto the end of a list.

Map 函數

map-keys($map) : Returns a list of all keys in a map.

map-values($map) : Returns a list of all values in a map.

map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

顏色函數

.test {
  text: to-upper-case(aaaaa);
  text: to-lower-case(aA-aAAA-aaa);
}

.footer {
  width: round(12.3px);
}

.footer1 {
  width: index(1px solid red, red);
}

$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble {
  color: map-get($social-colors, facebook);
}

4.插入文件

@import 命令，用來插入外部文件。

@import "path/filename.scss";

如果插入的是.css 文件，則等同于 css 的 import 命令。

@import "foo.css";

sass 高級用法

1.條件語句

@if lightness($color) >30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

2.循環語句

for 循環

@for $i **from** start **through** end || **@for** $i from start to end

區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。

@for $i from 1 to 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
@for $i from 1 through 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-3 {
  border: 3px solid blue;
}

@for 應用在網格系統生成各個格子 class 的代碼：

//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i} {
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }
}

while 循環

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

each 循環

@each 循環就是去遍歷一個列表，然后從列表中取出對應的值。

$list: adam john wynn mason kuroir; //$list 就是一個列表

@mixin author-images {
  @each $author in $list {
    .photo-#{$author} {
      background: url("/images/avatars/#{$author}.png") no-repeat;
    }
  }
}

.author-bio {
  @include author-images;
}

sass 高級用法

3.自定義函數

SASS 允許用戶編寫自己的函數。

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

II. SASS @規則

@media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。來看一個簡單示例：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

@at-root

@at-root 從字面上解釋就是跳出根元素。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

@debug

@debug 在 Sass 中是用來調試的，@debug 指令之后，在命令終端會輸出你設置的提示 DEBUG:

@warn

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @warn "你需要將#{$x}值設置在10以內的數";
  }
}

.test {
  @include error(15);
}

@error

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設置在10以內的數";
  }
}

.test {
  @include error(15);
}

III. vue 中引入 sass

安裝相關依賴包

npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass

在 build 文件夾下的 webpack.base.conf.js 的 rules 里面添加配置

{
  "test": /.sass$/,
  "loaders": ["style", "css", "sass"]
}

在*.vue 中修改 style 標簽