範例程式碼
1.Using Sass Maps
2.w3cplus - Sass Maps
3.Handling z-index
4.SASS MAP MAGIC
這個章節主要是來介紹如何將變數利用Sass 3.3的Sass Maps的方式來做延伸運用,
我個人是覺得這功能主要是拿來提升程式碼可讀性、變數群組化用的,
它提供變數具有像是json的資料組合,裡面也是key/value的結構:
$map: (
key:value,
key2:value2,
key3:value3
);
在寫Sass Maps的時候,要特別注意幾點:
接著來看Sass Maps是如何提取裡面的key/value,
在以前我們只能這樣載入變數:
$default-color: #fff !default;
$primary-color: #22ae39 !default;
.box{
color: $default-color;
background: $primary-color
}
但如果是Sass Maps的話是這樣:
$color: (
default: #fff,
primary: #22ae39
);
.box{
color: map-get($color,default);
background: map-get($color,primary)
}
Sass 3.3開放的時候有人寫了上面這樣的範例,
那時我看了就覺得反而比以前寫得還要冗長許多,
後來仔細看才發現Sass Maps除了map-get外,
還有許多功能可以使用,例如:
1.map-get($map,$key):取出$map裡指定的$key,將value取出來。
2.map-merge($map1,$map2):將兩個$map合併起來。
3.map-remove($map,$key):從Map裡面刪除一個$key。
4.map-keys($map):取出所有的$key。
5.map-values($map):取出所有的value。
6.map-has-key($map,$key):瀏覽裡面是否有$key值,有則回傳true,沒有便回傳false。
7.keywords($args):Returns the map of named arguments passed to a function or mixin that takes a variable argument list. The argument names are strings, and they do not contain the leading $.
這裡就來舉出在哪些情境下,比較適合使用Sass Maps:
@each批次產生樣式
以前我們要產生數組不同顏色按鈕時,必須這樣寫:
//全域顏色變數
$brand-defaule: #333 !default;
$brand-primary: #428bca !default;
//手動新增class
.btn-defaule {
background: $brand-defaule;
}.btn-primary {
background: $brand-primary;
}
你可以看出每新增一組樣式時,
都必須手動新增Class名稱,
但如果是用@each+Sass Maps的話:
//scss程式碼
$types: (
defaule : #333,
primary : #428bca,
) !default;
//按鈕
@each $name, $color in $types {
.btn-#{$name} {
background:$color;
color:#fff;
border: 1px solid darken($color,5%);
}
}
透過這樣,往後我們就把Sass Maps移動到Variable.scss做統一管理,
要新增一組按鈕樣式時,只要增加Sass Maps的一組key/value即可,
如果上面程式碼看不太懂,可再瀏覽延伸閱讀。
Z-index管理
網頁元素實際上和photoshop一樣有圖層的概念,
可以透過語法來賦予他們的圖層覆蓋設定,
但如果網站設定較複雜時,
就很難了解網站的圖層設定值,
這時我們也可以透過Sass Maps來做統一管理。
首先新增一個_z-index.scss,
在裡面寫:
$zindex: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000
);
.header {
z-index: map-get($zindex, header);
}
往後只要有用到z-index的元素就直覺曉得該拿這檔案瀏覽,
在以前設計Sass結構時,都會認為變數在一個SCSS檔應該統一管理,
但這樣的話你要管理z-index時,
就必須跑以下流程:
相信這樣比較你就可以看得出來兩者的差異性,
前者的方式都可在一個z-index檔上直接做完,
相對來說也省事多了。
提升可讀性
在設計Font icon時,都會寫一個icon指定一個class:
icon-checkmark:before {
content: "\e258";
}
.icon-instagram:before {
content: "\e32e";
}
.icon-twitter:before {
content: "\e32f";
}
.icon-dribbble:before {
content: "\e341";
}
.icon-github:before {
content: "\e34c";
}
.icon-soundcloud:before {
content: "\e35d";
}
你可以看得出來這樣要查詢、修改樣式非常麻煩,
但透過Sass Maps+each的設計就可改寫為:
$icons: (
skull: "\e18c",
warning: "\e243",
checkmark: "\e258",
instagram: "\e32e",
twitter: "\e32f",
dribbble: "\e341",
github: "\e34c",
soundcloud: "\e35d",
stackoverflow: "\e367",
);
[data-icon]:before {
@extend %icon; //icon預設樣式
content: attr(data-icon);
}
@each $name, $glyph in $icons {
[data-icon='#{$icon}']:before {
content: map-get($icons, $name);
}
}
往後我們要瀏覽這個網站有哪些樣式,
就只要看Sass Maps來瀏覽,
便不用像最上面還需要用滾輪滾上滾下花時間來找,
相對來說可讀性就高許多了。
總結
上面的範例是我自己實際有在使用的例子,
你也可以開始思考如何透過Sass Maps讓自己的程式碼更加友善地管理,
看完我的文章,你也可以到最上面的範例程式碼連結瀏覽更佳詳細的資訊。