iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

CSS 實戰心法系列 第 25

實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 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/


上一篇
實戰心法 - 自幹 Grid System
下一篇
實戰心法 - 應避免的 Sass @extend
系列文
CSS 實戰心法30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2016-12-25 12:02:24

請問卡斯伯大大,

那個什麼什麼.map 是做什麼用的?

常看到,但卻不知道-.-

卡斯伯 iT邦研究生 2 級 ‧ 2016-12-25 12:29:46 檢舉

你說的是哪個 .map 呢!?

這篇我介紹的是 Sass map,可以參考:https://www.sitepoint.com/using-sass-maps/

另外還有一種叫做 Source map,可以從產出的結果找出原始黨的位置,這段可以看:http://ithelp.ithome.com.tw/articles/10159158

我要留言

立即登入留言