前端開發：巢狀Sass Map的使用
這篇文章主要跟大家分享巢狀Sass Map的用法，並比較不使用Sass Map，及單層Sass Map的用法
從這篇文章你會知道：
- 一般設置Heading 樣式的方法
- 使用Sass Map設置Heading樣式的方法
- 使用巢狀Sass Map設置Heading樣式的方法
延伸閱讀：
在 Bootstrap 5當中，我們看到Heading 的設定如下：
%heading {
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: var(--#{$prefix}heading-color);
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
}上面這種設定的方式、H1~H6除了字級大小不同以外，字體名稱、粗細、行高等等都是相同的設定。那如果我們希望H1 ~ H6 擁有不同的粗細，行高…等，又該如何設置比較好呢？
接下來我們將為你示範。
ㄧ、逐一設置
Sass設置
$h1-font-size: 40px;
$h2-font-size: 36px;
$h3-font-size: 32px;
$h1-font-weight: 700;
$h2-font-weight: 600;
$h3-font-weight: 600;
$h1-line-height: 1.2em;
$h2-line-height: 1.1em;
$h3-line-height: 1.1em;
h1 {
font-size: $h1-font-size;
font-weight: $h1-font-weight;
line-height: $h1-line-height;
}
h2 {
font-size: $h2-font-size;
font-weight: $h2-font-weight;
line-height: $h2-line-height;
}
h3 {
font-size: $h3-font-size;
font-weight: $h3-font-weight;
line-height: $h3-line-height;
}產生的CSS結果：
h1 {
font-size: 40px;
font-weight: 700;
line-height: 1.2em;
}
h2 {
font-size: 36px;
font-weight: 600;
line-height: 1.1em;
}
h3 {
font-size: 32px;
font-weight: 600;
line-height: 1.1em;
}以上這是最直觀的作法，只做h1~h3倒還好，如果需要設定h1~h6，就要重覆設置6次
二、使用Sass Map + @each loop
Sass設置
$font-size: (
'h1': 50px,
'h2': 42px,
'h3': 36px,
'h4': 24px,
'h5': 16px,
'h6': 16px,
);
$font-weight: (
'h1': 700,
'h2': 700,
'h3': 700,
'h4': 500,
'h5': 500,
'h6': 400,
);
$line-height: (
'h1': 1.5,
'h2': 1.5,
'h3': 1.6,
'h4': 1.6,
'h5': 1.5,
'h6': 1.75,
);
@each $font, $size in $font-size {
%#{$font}-font-size {
font-size: $size
}
}
@each $font, $weight in $font-weight {
%#{$font}-font-size-mb {
font-weight: $weight
}
}
@each $font, $height in $line-height {
%#{$font}-line-height {
line-height: $height
}
}
@for $i from 1 through 6 {
.h#{$i} {
@extend %h#{$i}-font-size;
@extend %h#{$i}-font-size-mb;
@extend %h#{$i}-line-height;
@extend %h#{$i}-letter-spacing;
}
}產生出來的CSS
h1 {
font-size: 50px;
}
h2 {
font-size: 42px;
}
h3 {
font-size: 36px;
}
...
h1 {
font-weight: 700;
}
h2 {
font-weight: 700;
}
h3 {
font-weight: 700;
}
...
h1 {
line-height: 1.5;
}
h2 {
line-height: 1.5;
}
h3 {
line-height: 1.6;
}
...三、使用巢狀的sass map + @each loop
Sass設置
// 使用sass map設置參數
$heading: (
'h1-style': (
'name':'h1',
'font-size': 50px,
'font-weight': 700,
'line-height': 1.5em,
'letter-space': 0.05em,
'font-size-mb': 38px,
),
'h2-style': (
'name':'h2',
'font-size': 42px,
'font-weight': 700,
'line-height': 1.5em,
'letter-space': 0.05em,
'font-size-mb': 30px,
),
'h3-style': (
'name':'h3',
'font-size': 36px,
'font-weight': 700,
'line-height': 1.6em,
'letter-space': 0.06em,
'font-size-mb': 26px,
),
'h4-style': (
'name':'h4',
'font-size': 24px,
'font-weight': 500,
'line-height': 1.6em,
'letter-space': 0.06em,
'font-size-mb': 22px,
),
'h5-style': (
'name':'h5',
'font-size': 16px,
'font-weight': 500,
'line-height': 1.5em,
'letter-space': 0.05em,
'font-size-mb': 15px,
),
'h6-style': (
'name':'h6',
'font-size': 16px,
'font-weight': 400,
'line-height': 1.5em,
'letter-space': 0.05em,
'font-size-mb': 15px,
)
);
@each $key, $value in $heading {
%#{map-get($value, name)}-style {
font-size: map-get($value, 'font-size');
font-weight: map-get($value, 'font-weight');
line-height: map-get($value, 'line-height');
letter-spacing: map-get($value, 'letter-space');
}
}
@for $i from 1 through 6 {
h#{$i} {
@extend %h#{$i}-style;
}
}產生的CSS
h1 {
font-size: 50px;
font-weight: 700;
letter-spacing: 0.05em;
}
h2 {
font-size: 42px;
font-weight: 700;
letter-spacing: 0.05em;
}
h3 {
font-size: 36px;
font-weight: 700;
letter-spacing: 0.06em;
}
h4 {
font-size: 24px;
font-weight: 500;
letter-spacing: 0.06em;
}
h5 {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.05em;
}
h6 {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
}上面的範例可以看出：使用巢狀sass map + @each loop的設置，不僅讓Sass變得簡潔易懂，連產生出來的CSS也是相當的簡潔。
在上面的例子中，我們先將heading 的樣式設置為 %heading-style，例%h1-style,這樣子做的好處是，可以使用@extend重覆利用%heading-style的設置。之所以使用 @extend %h1-style，而不是使用@extend h1，是因為在實際開發的情況下、我們常常會對h1 ~ h6 還有一些額外的設定，但卻不是我們需要的。例如：
Sass設置
// 接 使用巢狀的sass map + @each loop 的範例
.product-name h2 {
margin-bottom: 30px;
}
.article-title {
@extend h2;
}產生的CSS
h2,
.article-title {
font-size: 42px;
font-weight: 700;
letter-spacing: 0.05em;
}
.product-name h2,
.product-name .article-title {
margin-bottom: 30px;
}上面的.product-name .article-title 也許是我們根本就不需要的東西，這時候把heading的樣式獨立出來，就很有必要了。
Sass設置
.product-name h2 {
margin-bottom: 30px;
}
.article-title {
@extend %h2-style;
}產生的CSS
h2,
.article-title {
font-size: 42px;
font-weight: 700;
letter-spacing: 0.05em;
}
.product-name h2 {
margin-bottom: 30px;
}這樣子產生出來的CSS結果是不是就合理多了！
以上就是歐斯瑞本次 『巢狀Sass Map的使用』 的分享
我要留言