Sass map get

去年有介紹sass模組的開發方式連結，sass 3.3 釋出以後有更好的方式去執行，這篇來介紹快速且好管理的模組製作方法。

注意

這篇要介紹的是sass map，所以請先確認自己的sass版本是3.3以上，如果要確認自己sass版本，可以在Terminal輸入 sass -v就可以看到目前系統內的版本。

$ sass -v

結果

先來看預期的結果，按鈕是類似bootstrap，但是我簡化了很多部分的程式碼(縮短比較好閱讀)，重點是在scss內的$btn-config，透過這config可以快速調整按鈕的樣式，如果有增減，也只需要調整config即可。

See the Pen EaovPd by Wcc723 (@Wcc723) on CodePen.

開始

html的部分就只有這三段代表不同的按鈕，不同的地方只有btn-xxx用來套用不同按鈕樣式。

<a href="#" class="btn btn-default">Button default</a>
<a href="#" class="btn btn-primary">Button primary</a>
<a href="#" class="btn btn-danger">Button danger</a>

按鈕中還有包含基本的樣式，這不是本篇的重點，大概看過就好。

.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

Scss 重點開始

我長期以來都是寫sass格式的，但因為sass map的關係，最近開始改寫scss…。

Sass map的格式有點類似json，只是把{}改成了()，以下代表了三組按鈕的樣式設定檔(default, primary, danger)，每一組還有包含他的class name、color、background、border-color，清楚的標示可以讓未來更容易閱讀程式碼。

// 定義按鈕的不同狀態設定，類似json格式
$btn-config:(
	default:(
		class: 'default',
		color: #333,
		bg: #fff,
		border-color: #ccc
	),
	primary:(
		class: 'primary',
		color: #fff,
		bg: $brand-primary,
		border-color: darken($brand-primary, 0)
	),
	danger:(
		class: 'danger',
		color: #fff,
		bg: $brand-danger,
		border-color: darken($brand-danger, 0)
	)
);

透過sass的$each把$btn-config每一組設定帶出來，這方法有點類似jquery的$.each。接下來的map-get是sass map新的function，取出值以後，就像平常寫scss一樣，把變數寫在樣式內就完成了。

// 用$each 帶入設定值
@each $name, $value in $btn-config {
  $class: map-get($value, class); // 用map-get取出各個設定值
  $color: map-get($value, color);
  $bg: map-get($value, bg);
  $border-color: map-get($value, border-color);

  // 接下來將變數加到class內就完成了
  .btn-#{$class}{
    color: $color;
    background-color: $bg;
    border-color: $border-color;
    &:hover{
      background-color: darken($bg, 5%);
      border-color: darken($border-color, 5%);
    }
  }
}

延伸

如果後來發現按鈕的樣式不夠，其實只要改$btn-config就可以了，如果有興趣，試著把下面這段加到範例裡的$btn-config吧～。

dark:(
	class: 'dark',
	color: #fff,
	bg: #333,
	border-color: darken(#333, 0)
)

如果在html內加入這段，有看到黑色的按鈕代表成功了。

<a href="#" class="btn btn-dark">Button dark</a>

再看一次範例。

See the Pen EaovPd by Wcc723 (@Wcc723) on CodePen.