sass介紹及使用

• SASS 官網（中文）
• SASS 官網（英文）

<br/>

<img src="http://sass.bootcss.com/asset...; height="180"/>

SASS 是什麼

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

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

SASS 的特色

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

---

<!-- markdown-to-slides index.md -o index.html -s slide.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三、 10px；
• 字符串：有引號字符串或無引號字符串，如，"foo"、 'bar'、 baz；
• 顏色：如，blue、 #04a3f九、 rgba(255,0,0,0.5)；
• 布爾型：如，true、 false；
• 空值：如，null；
• 值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

<h4>字符串</h4>

• 有引號字符串 (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 容許使用變量，全部變量以&dollar;開頭。

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

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

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

<h4>普通變量和默認變量</h4>

sass 的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可。

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

---

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

<h4>局部變量和全局變量</h4>

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

<h4>全局變量的影子</h4>

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

同上一個例子

<h4>何時聲明變量？</h4>

1. 該值至少重複出現了兩次；
2. 該值至少可能會被更新一次；
3. 該值全部的表現都與變量有關（非巧合）。

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

---

基本用法

3.計算功能

<h5>加減乘除都不容許不一樣單位進行運算</h5>

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

<h4>加法 + 減法</h4>

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

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

$full-width: 960px;

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

---

<h4>乘法</h4>

可以支持多種單位（好比 em ,px , %）

乘法運算時，兩個值單位相同時，只須要爲一個數值提供單位便可

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

<h4>除法</h4>

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

<h5>除法運算時，若是兩個值帶有相同的單位值時，除法運算以後會獲得一個不帶單位的數值。</h5>

<h4>顏色運算</h4>

全部算數運算都支持顏色值，而且是分段運算的。也就是說，紅、綠和藍各顏色分段單獨進行運算。

---

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

<h4>字符運算</h4>

在 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 種：選擇器嵌套、屬性嵌套、僞類嵌套

<h4>選擇器嵌套</h4>

& 有 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;
}

---

<h4>屬性嵌套</h4>

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

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

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

<h4>僞類嵌套</h4>

.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);
}

---

<h4>混合宏的不足</h4>

混合宏在實際編碼中給咱們帶來不少方便之處，特別是對於複用重複代碼塊。但其最大的不足之處是會生成冗餘的代碼塊。好比在不一樣的地方調用一個相同的混合宏時。

@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 調用的佔位符，編譯出來的代碼會將相同的代碼合併在一塊兒。

---

<h4>混合宏 VS 繼承 VS 佔位符</h4>

<img src="./sass_reuse.jpg" />

---

css 代碼的重用

3.函數

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

• 字符串函數
• 數字函數
• 列表函數
• 顏色函數
• Introspection 函數
• 三元函數等

<h4>字符串函數</h4>

unquote(&dollar;string) : Removes quotes from a string.

quote(&dollar;string) : Adds quotes to a string.

to-lower-case(&dollar;string) : Converts a string to lower case.

---

<h4>數字函數</h4>

round(&dollar;number) : Rounds a number to the nearest whole number.

ceil(&dollar;number) : Rounds a number up to the next whole number.

floor(&dollar;number) : Rounds a number down to the previous whole number.

<h4>列表函數</h4>

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.

<h4>Map 函數</h4>

map-keys(&dollar;map) : Returns a list of all keys in a map.

map-values(&dollar;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.

<h4>顏色函數</h4>

---

.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.循環語句

<h4>for 循環</h4>

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

---

<h4>while 循環</h4>

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

---

<h4>each 循環</h4>

@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 @規則

<h4>@media</h4>

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

---

<h4>@at-root</h4>

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

---

<h4>@debug</h4>

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

<h4>@warn</h4>

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

.test {
  @include error(15);
}

---

<h4>@error</h4>

@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 標籤

<style lang="scss">

---

VI. 總結

介紹 SASS

Sass 和 Scss 區別

編譯風格

基本用法：數據類型、變量、計算功能、嵌套、註釋

代碼重用：繼承、混合宏、佔位符、函數、文件插入

高級用用：條件語句、循環、自定義函數

sass@規則：media、at-root、debug、warn、error

vue 中使用 sass

<center>-- End --</center>