這算是 element 源碼學(xué)習(xí)的番外篇，因?yàn)?element 中使用了大量 sass 來(lái)寫樣式。而 UI 框架的核心其實(shí)就是樣式。所以，抽空把 sass 學(xué)了一遍，寫了些小 demo 實(shí)踐，總結(jié)成此文。

SASS 安裝和調(diào)試

簡(jiǎn)單說(shuō)下 sass 如何安裝和編譯調(diào)試。
參照官網(wǎng)，需要使用 gem 來(lái)安裝 sass。如果是windows用戶沒(méi)有 gem 需要先安裝 Ruby

$ gem install sass

如果有權(quán)限問(wèn)題，需要加上 sudo 。

$ sudo gem install sass

最后，通過(guò)查詢 sass 版本號(hào)驗(yàn)證是否安裝成功。

$ sass -v

編譯命令很簡(jiǎn)單，在項(xiàng)目目錄下編譯選中 .scss、.sass 文件即可。

$ sass hello.scss hello.css

如果是學(xué)習(xí) sass 這一個(gè)命令足矣，其他命令可參考sass 編譯

語(yǔ)法簡(jiǎn)述

下面我用自己對(duì) sass 語(yǔ)法的理解，配合上 demo 快速過(guò)一遍 sass 基礎(chǔ)語(yǔ)法。

sass 文件和 scss 文件區(qū)別

兩者其實(shí)都是 sass 可以識(shí)別的文件，唯一不同點(diǎn)是 .sass 文件不使用大括號(hào)和分號(hào)。如下~

// .scss
$default-color: #FFAACC;
.selected {
    color: $default-color;
}

// .sass
$default-color: #FFAACC
.selected 
    color: $default-color

// .css
.selected {
  color: #FFAACC; 
}

官方文檔推薦使用 .scss 文件類型寫法，避免 .sass 文件的嚴(yán)格格式要求報(bào)錯(cuò)。

變量

通過(guò) $ 符號(hào)來(lái)定義 sass 變量，變量在樣式內(nèi)外都可定義，用于各個(gè)樣式中。定義的變量不會(huì)在編譯后的 CSS 文件中顯示。

$default-color: #FFAACC;
$border-color: #AAFFCC;
$default-border:  1px solid $border-color;
$extra-color: #BBDD00;

.selected {
    $scoped-width: 60px;
    width: $scoped-width;
    color: $default-color;
    border: $default-border;
}

編譯結(jié)果：

.selected {
  width: 60px;
  color: #FFAACC;
  border: 1px solid #AAFFCC; }

另外注意的一個(gè)點(diǎn)是在定義變量時(shí)使用的 - 和 _ 的效果是一樣的。即 $border-color 和 $border_color 指向的是同一個(gè)變量。

嵌套

為了避免一些代碼的重復(fù)，引入了代碼的嵌套。看一個(gè)例子：

.selected {
    color: #FFAA22;
    h1 {
        color: #FFDD77
    }
    div {
        width: 50px;
        height: 20px;
        span {
            color: #012DD6;
        }
    }
    &:hover {
        color: #FAFAFA;
    }
}

得到的結(jié)果如下：

.selected {
  color: #FFAA22; }
  .selected h1 {
    color: #FFDD77; }
  .selected div {
    width: 50px;
    height: 20px; }
    .selected div span {
      color: #012DD6; }
  .selected:hover {
    color: #FAFAFA; }

從中可以看到，嵌套可以將需要重復(fù)寫選擇器的過(guò)程嵌套到一個(gè)表達(dá)式中了。

父選擇器標(biāo)識(shí)符 &

從上面的例子中看到有這么一段 &:hover 而在編譯結(jié)果中得到的結(jié)果是 .selected:hover ，其實(shí) & 標(biāo)識(shí)符就代表了父級(jí)選擇器。就這么簡(jiǎn)單，不理解的時(shí)候把父級(jí)選擇題替換 & 理解下就簡(jiǎn)單了。

嵌套css

sass 中的嵌套是可以多個(gè)樣式同時(shí)嵌套的。 用法見(jiàn)demo。

.container .content {
    h1, h2, h3 {margin-bottom: .8em}
}

編譯結(jié)果

.container .content h1, .container .content h2, .container .content h3 {
  margin-bottom: .8em; }

子組合選擇器和同層選擇器

關(guān)于 >、+ 和 ~ 這三個(gè)選擇器，是 CSS3 中就有的。在 SASS 中同樣適用。
簡(jiǎn)單說(shuō)下三個(gè)選擇器用途（參考 CSS 選擇器）：

• div>p 選取父元素是 <div> 元素的每個(gè) <p> 元素
• div+p 選擇 <div> 元素之后緊跟的每個(gè) <p> 元素
• p~ul 選擇前面有 <p> 元素的每個(gè) <ul> 元素。

看個(gè)官網(wǎng)的例子：

article {
    ~ article { border-top: 1px dashed #ccc }
    > section { background: #eee }
    dl > {
      dt { color: #333 }
      dd { color: #555 }
    }
    nav + & { margin-top: 0 }
}

動(dòng)手編譯出的結(jié)果如下：

article ~ article {
  border-top: 1px dashed #ccc; }
article > section {
  background: #eee; }
article dl > dt {
  color: #333; }
article dl > dd {
  color: #555; }
nav + article {
  margin-top: 0; }

嵌套屬性

屬性嵌套說(shuō)白了就是把 margin-bottom 這類有 - 符號(hào)隔開(kāi)的屬性拆分開(kāi)來(lái)便于查看和編寫。

nav {
    border: {
    style: solid;
    width: 1px;
    color: #ccc;
    }
  }

這里把 border-style 等屬性進(jìn)行了拆分，結(jié)果如下：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc; }

導(dǎo)入

sass 提供了 sass 文件導(dǎo)入功能?？梢宰鲆恍┗A(chǔ)樣式的復(fù)用。用法很簡(jiǎn)單：

// var.scss
$default-color: #AABBCC;

.focused {
    color: red;
    margin: 5px;
}

// h1.scss
h1 {
    color: #BBDDFF;
    margin: 10px;
}

// demo.scss
@import "var01";

$default-color: #FFAADD !default;

.selected {
    color: $default-color;
    @import "h1";
}

以上代碼中將 var.scss 和 h1.scss 兩個(gè)文件導(dǎo)入到了 demo.scss 中，最終生成結(jié)果如下：

.focused {
  color: red;
  margin: 5px; }

.selected {
  color: #AABBCC; }
  .selected h1 {
    color: #BBDDFF;
    margin: 10px; }

從結(jié)果來(lái)說(shuō)說(shuō)導(dǎo)入的幾個(gè)注意點(diǎn)：

• 導(dǎo)入文件使用 @import 表達(dá)式來(lái)導(dǎo)入，導(dǎo)入可以是外部導(dǎo)入也可是嵌套導(dǎo)入。上面例子中 var 是外部導(dǎo)入，而 h1 是嵌套導(dǎo)入的。
• $default-color: #FFAADD !default; 中的 !default 是定義變量默認(rèn)值的方式，如果導(dǎo)入文件中有同樣的值優(yōu)先使用導(dǎo)入的值，如果導(dǎo)入文件中沒(méi)有這個(gè)值，使用默認(rèn)值。
• sass 中的 @import 與 css 中的 @import 不同，sass 中是編譯的時(shí)候就直接導(dǎo)入生成 css 文件了，而 css 中，只有執(zhí)行到 @import 時(shí)，瀏覽器才會(huì)去下載 css 文件，會(huì)導(dǎo)致頁(yè)面加載變慢。

靜默注釋

就是在 sass 是否保留注釋內(nèi)容的語(yǔ)法。保留注釋的方式為：在CSS語(yǔ)法允許的地方，以 /*...*/ 的方式寫注釋就能在生成的 css 文件中看到。再來(lái)看一個(gè)例子：

// 不顯示
/* 顯示 */

.selected {
    //不顯示
    /* 顯示 */
    color: #FFAADD; // 不顯示
    margin:/* 不顯示 */ 10px; /* 顯示 */
    /* 顯示 */border: 1px dashed /* 不顯示 */ #ccc;
}

// 不顯示
/* 顯示 */

編譯結(jié)果正如注釋所預(yù)測(cè)的。

混合器

混合器在 element 的樣式表中用的非常多，是個(gè)很強(qiáng)大的功能。混合器以 @mixin 來(lái)導(dǎo)出混合內(nèi)容，使用 @include 來(lái)導(dǎo)入混合內(nèi)容。

基本用法

我的理解是：@mixin 類似定義變量一樣定義個(gè)混合器（編譯的時(shí)候不顯示 @mixin 的內(nèi)容），@include 獲取混合器來(lái)替換 @include xxxx 的這行內(nèi)容。

// mixin.scss
@mixin rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    div {
        width: 50px;
        height: 20px;
    }
}

.name {
    span {
        color: #FFAADD;
    }
}

// include.scss
@import "mixin";

.notice {
    background-color: green;
    border: 2px solid #00aa00;
    @include rounded-corners;
}

這里在官方 demo 上加了點(diǎn)代碼驗(yàn)證問(wèn)題。得到結(jié)果如下：

.name span {
  color: #FFAADD; }

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
  .notice div {
    width: 50px;
    height: 20px; }

這個(gè)demo驗(yàn)證了：1. @mixin 是一個(gè)類似變量的內(nèi)容。在 @import 導(dǎo)入的內(nèi)容中只顯示了 .name 樣式。 2. @include 會(huì)替換 @include xxx 這段代碼。就算 @mixin 中有各種寫法都會(huì)應(yīng)用到 @include中，如嵌套 CSS。

混合器傳參

混合器可以接收 @include 表達(dá)式傳遞的參數(shù)。而且，參數(shù)可以設(shè)置默認(rèn)值。

// mixin.scss
@mixin link-colors($normal: white, $hover: white, $visited: white) {
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}

// include.scss
@import "mixin";

// 寫法一，按照默認(rèn)順序傳遞參數(shù)
a {
    @include link-colors(blue, red, green);
}

// 寫法二，按照參數(shù)名傳遞參數(shù)
b {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

編譯結(jié)果為:

a {
  color: blue; }
  a:hover {
    color: red; }
  a:visited {
    color: green; }

b {
  color: blue; }
  b:hover {
    color: red; }
  b:visited {
    color: green; }

如果說(shuō) @include 中不傳遞參數(shù) @include link-colors(); ，那么生成結(jié)果的 color 都為默認(rèn)值 white。

element 中的混合

在 element 源碼中用了不少混合，有一種寫法 sass 的快速入門中沒(méi)有提到。就找一個(gè)簡(jiǎn)單的 el-card 樣式來(lái)學(xué)習(xí)下來(lái)：

@import "mixins/mixins";
@import "common/var";

@include b(card) {
  border-radius: $--card-border-radius;
  border: 1px solid $--card-border-color;
  background-color: $--color-white;
  overflow: hidden;
  box-shadow: $--box-shadow-light;
  color: $--color-text-primary;

  @include e(header) {
    padding: #{$--card-padding - 2 $--card-padding};
    border-bottom: 1px solid $--card-border-color;
    box-sizing: border-box;
  }

  @include e(body) {
    padding: $--card-padding;
  }
}

從中可以看到所有的屬性都是使用了 @include 方式進(jìn)行混合的。最終生成的 CSS 文件如下：

.el-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #303133; }
  .el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box; }
  .el-card__body {
    padding: 20px; }

先看下導(dǎo)入，其中 var 文件是項(xiàng)目樣式變量統(tǒng)一保存的地方；mixin 文件用于混合；再加上幾個(gè) @include 表達(dá)式，答案一定是在 mixin 中的。我們就直接找到 @mixin b 和 @mixin e 兩個(gè)混合項(xiàng)。

@mixin b($block) {
  $B: $namespace+'-'+$block !global; // 定義 B 變量：變量名 el-card

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

發(fā)現(xiàn)有許多 sass 快速入門中沒(méi)有提到過(guò)的語(yǔ)法： @if，@else 等等，這里查閱具體文檔列出其功能：

• @if @else 這兩者和任何編程語(yǔ)言的 if ... else ... 的用法是一樣的，條件判斷。if 中條件為 true 進(jìn)入邏輯，否則使用 else 邏輯。
• @at-root @at-root 指令導(dǎo)致一個(gè)或多個(gè)規(guī)則被限定輸出在文檔的根層級(jí)上，而不是被嵌套在其父選擇器下。
• @content 樣式內(nèi)容塊可以傳遞到混入（mixin）包含樣式的位置。樣式內(nèi)容塊將出現(xiàn)在混入內(nèi)的任何 @content 指令的位置。這使得可以定義抽象 關(guān)聯(lián)到選擇器和指令的解析。
• @each in 類似js用法，遍歷列表獲取每個(gè)value值。
• #{...} 是插值語(yǔ)法，用于在選擇器和屬性名中使用 SassScript 變量，所以 .#{$B} 表達(dá)式，如果 $B 的值為 hello-world，那么表達(dá)式結(jié)果等于 .hello-world

其實(shí)看完這些用法，上面的代碼就很好理解了。具體關(guān)于 element 樣式學(xué)習(xí)的細(xì)節(jié)將在下篇博客中詳細(xì)學(xué)習(xí)。

繼承

個(gè)人感覺(jué)繼承就是幾個(gè)樣式類寫在一起。而且，繼承是可以嵌套的。

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

.error02 {
    @extend .seriousError;
    margin: 5px;
}

編譯結(jié)果為：

.error, .seriousError, .error02 {
  border: 1px red;
  background-color: #fdd; }

.seriousError, .error02 {
  border-width: 3px; }

.error02 {
  margin: 5px; }

下面引用下繼承的注意事項(xiàng)：

• 跟混合器相比，繼承生成的 css 代碼相對(duì)更少。因?yàn)槔^承僅僅是重復(fù)選擇器，而不會(huì)重復(fù)屬性，所以使用繼承往往比混合器生成的 css 體積更小。如果你非常關(guān)心你站點(diǎn)的速度，請(qǐng)牢記這一點(diǎn)。
• 繼承遵從 css 層疊的規(guī)則。當(dāng)兩個(gè)不同的 css 規(guī)則應(yīng)用到同一個(gè) html 元素上時(shí)，并且這兩個(gè)不同的 css 規(guī)則對(duì)同一屬性的修飾存在不同的值，css 層疊規(guī)則會(huì)決定應(yīng)用哪個(gè)樣式。相當(dāng)直觀：通常權(quán)重更高的選擇器勝出，如果權(quán)重相同，定義在后邊的規(guī)則勝出。

所以，其實(shí)繼承相比混合更簡(jiǎn)單。繼承只是選擇器的重復(fù)，而混合是用一段代碼替換標(biāo)簽 @include 標(biāo)簽。

最后

由于 element 項(xiàng)目中使用了大量的 sass 樣式，所以想了解 element 必須對(duì) sass 有一定了解。本文簡(jiǎn)單解決了 sass 是什么？基礎(chǔ)用法怎么用？?jī)蓚€(gè)問(wèn)題。更加深入的 sass 語(yǔ)法涉及的不多，算是快速入門博客啦。
在了解了 sass，能夠看懂 element 中的樣式表后，就可以愉快的去學(xué)習(xí) element 源碼啦~

打個(gè)廣告

上海鏈家-鏈家上海研發(fā)中心需求大量前端、后端、測(cè)試，需要內(nèi)推請(qǐng)將簡(jiǎn)歷發(fā)送至 dingxiaojie001@ke.com。