上一篇介紹了很短的程式碼產生一整組 Grid System，然後還提供變數讓 Grid 還有額外的參數可以設定，手寫的 CSS 如果要重新計算 12 組以上的計算也太苦了 T_T，這也就是 Sass 的魅力所在。

Sass 的運用上手法非常多，這次來介紹透過簡單的變數，即可大量產生相似的模組。

Sass Map

Sass map 是類似 json 的一種變數，json 中包含的陣列、物件、屬性在 Sass map 都能有相似的寫法，所以首先要先使用 Sass Map 來定義基礎的元件變數。

$btn-config 裡面包覆的就是 Sass map，與 json 最大的差異是使用 () 取代 {}，這樣的手法可以大量的產生樣式的變數。

$gray-light:  #777;
$brand-primary: #009AFF;
$brand-accent: #D84315;

$btn-config:(
	default:(
		class: 'default',
		color: $gray-light,
    bg: #fff,
		border-color: #ccc
	),
	primary:(
		class: 'primary',
		color: #fff,
		bg: $brand-primary,
		border-color: $brand-primary
	),
	accent:(
		class: 'accent',
    color: #fff,
		bg: $brand-accent,
		border-color: $brand-accent
	)
);

接下來我們在製作 @mixin 與 button 的基本樣式，@mixin 可以將產出的 CSS 先寫成公式，在後續的流程在套用，這個公式我是直接抓 Bootstrap 所寫好的。

另外 .btn 則是先前提過好幾次的結構，而這個結構是不包含樣式 (色彩、大小...)，樣式的部分是在 @mixin 內。

// @mixin 運算
@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  transition: background-color .15s;
  border-color: $border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 6%);
    border-color: darken($border, 8%);
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: $background;
      border-color: $border;
    }
  }

  .badge {
    color: $background;
    background-color: $color;
  }
}

// 基本 btn 結構
.btn {
  // 結構
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  &:hover, &:focus {
    color: #333;
    background-color: #e6e6e6;
  }
}

Sass @each

Sass @each 也是像 javascript 中的 each，將 $btn-config 中的物件一一讀出(使用 map-get($value, value))，然後在 @include 上一段所產生的 @mixin。

這樣就能一次產生出大量的 CSS 樣式，所依據的就是先前所設定好的 Sass map，這範例僅使用三種樣式，相同的觀念下我們可以用這方法產出更多的樣式在內，只需要修改 Sass map 即可，不需要改其他部分。

@each $name, $value in $btn-config {
  $class: map-get($value, class);
  $color: map-get($value, color);
  $bg: map-get($value, bg);
  $border-color: map-get($value, border-color);

  .btn-#{$class}{
    @include button-variant($color, $bg, $border-color);
  }
}

範例如下：http://codepen.io/Wcc723/pen/qqwGdm/

結語

現在的 CSS 大多會使用 Sass、Less、PostCSS 來做管理，使用哪一種語言倒是無所謂，但建議先從一種入門到熟悉，會發現省去許多不必要的時間，且在管理上會容易許多。

文章同時發表於：https://wcc723.github.io/css/2016/12/25/sass-map/