Sass->十分鐘寫一個Sass組件

原文：https://www.sitepoint.com/sass-component-10-minutes/

如今一些開發者認爲，把具備特定功能的代碼片斷獨立出來，互相組合，去開發網站或應用，這是一種很好的方式。也就是組件化，可是實現起來卻沒有那麼容易。

一個好的示例讓人豁然開朗, 我選取的示例是幾乎每一個網站或應用都具備的交互組件：信息提示。

經過寫一個具備不一樣信息類型的提示組件，會有助於提高你的Sass。那就讓咱們開始動手吧。

定義提示顏色

咱們須要什麼，信息。什麼樣式的信息？讓咱們參照一下具備這個組件的框架：Bootstrap。Bootstrap定義了四種類型的提示信息：

• 驗證
• 錯誤
• 警告
• 信息

看起來挺適合咱們用來做爲參考。在生活中咱們會用不一樣的語調去表達不一樣的情感，同理，咱們能夠在網站上用不一樣的顏色去顯示不一樣類型的信息。四種類型的提示，每一個都有本身的顏色。讓咱們再一次借用一下Bootstrap的作法，定義咱們提示的顏色：

• 綠色表示成功
• 紅色表示錯誤
• 黃色或者橘黃色表示警告
• 淺藍色表示信息，說明

基本樣式

全部的信息都有一些公共的樣式，如 padding, margins, 也可能會有排版樣式。最後，惟一不一樣的樣式是表示不一樣提示的顏色。

讓咱們先寫一個placeholder:

%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}

第一個要注意的事情是：咱們沒有設置任何字體樣式，如大小，字體，或者行高。由於使用這個模塊的項目，通常都已經設置了這些通用的樣式。如今這樣，會讓咱們的組件更加獨立化。

咱們也沒有設置邊框的顏色。border-color這個屬性的默認值是currentcolor。在大多瀏覽器中，是黑色。

如今開始寫一個mixin：

@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}

就像你所看到的，mixin作了兩件事情：

1. 它設置了一個關於color的屬性，經過參數把一個顏色值傳遞進來。而後設置了color,border-color這兩個屬性，很感謝Sass的lighten顏色函數。使用Sass的顏色操做函數有助於減小mixin須要輸入的參數數量。

2. 繼承%message這個placeholder，因此你不用在每一個信息類型中去重複書寫這些樣式了。這樣一來，代碼很是符合DRY原則。

調用mixin

到如今爲止，已經完成的差很少了。還剩下的事情是調用mixin，爲不一樣類型的提示信息傳入其對應的顏色參數值：

.message-error {
  @include message(#b94a48);
}

.message-valid {
  @include message(#468847);
}

.message-warning {
  @include message(#c09853);
}

.message-info {
  @include message(#3a87ad);
}

讓組件可用性更強

咱們如今作的已經至關整潔了。若是想增長一個新的提示類型，那須要作的只是@include message(你選擇的顏色值)，在那個新的提示類型對應的class裏邊。可是咱們能使組件代碼更輕便適用嗎？

把每一個類型的提示和一個顏色映射對應起來，有一些好的方式嗎？有：嵌套列表（Nested Lists）。經過建立一個二維列表，而後循環這些值，咱們能夠很容易作到。

$message-types: (
  (error    #b94a48)
  (valid    #468847)
  (warning  #c09853)
  (info     #3a87ad)
) !default;

@each $message-type in $message-types {
  $type:  nth($message-type, 1);
  $color: nth($message-type, 2);

  .message-#{$type} {
    @include message($color);
  }
}

如今Sass生成的代碼和咱們上邊寫的效果同樣。你能夠把變量列表放到樣式表的頂部或者一個配置文件中去，這樣的話，增刪改一個信息類型將會很方便容易。

提醒：若是你打算將這個組件添加到某個庫或者框架中去，那麼!default標記（$message-types這個變量中使用的）將會讓你很容易去覆蓋這個變量，若是你有這個需求的話。

使用map（Sass 3.3）

咱們可使用Sass 3.3中新增的數據類型：Maps。Maps就像PHP中的關聯數組，或者javascript中的對象。他們都是鍵值對映射。

$message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
) !default;

@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

很爽吧。

優雅的錯誤處理

常常被Sass開發者們忽略的一件事情是：優雅地處理錯誤的能力。你應該保證自定義的函數和mixins中傳入的參數值是正確的，若是不正確，那麼要提供警告信息。比起讓Sass本身去處理這些錯誤好多了。

在這個示例裏邊，咱們須要保證$color這個參數的值必須是一個顏色值。

@mixin message($color) {
  @if type-of($color) == color {
    @extend %message;
    color: $color;
    border-color: lighten($color, 20%);
    background: lighten($color, 40%);
  }

  @else {
    @warn "#{$color} is not a color for `message`.";
  }
}

如今這樣的話，就可以保證當mixin接受到一個非顏色的參數值時，Sass不會崩潰掉。另外，它也能幫助開發者知道這是由無效參數引起的錯誤。

最後的話

在30行的SCSS裏邊，咱們寫出了這樣的組件：

• 乾淨，好懂
• DRY，輕量
• 可隨處使用，可配置
• 容易擴展

這些是適用於全部組件的規則。