續上一篇 Sass 基本的語法應用,這篇來介紹 Sass 的進階語法,讓你會一度有 CSS 是程式語言的錯覺。
# 變數
- 定義變數variable
$variable:__
- 插值(插入變數)
#{variable}
# Map
基本語法
$variable: ( key: value, key: value );
範例
$z-index: ( container: 5, header: 10, notice: 20 ); .header{ z-index: map-get($z-index, header); } .container{ z-index: map-get($z-index, container); } .notice{ z-index: map-get($z-index, notice); }
# 控制指令 Control Directives
@if
@for
@each
@while
# @if
基本語法
@if{ }
範例
$theme: "dark"; body{ @if $theme == dark { background-color: black }@else if $theme == light { background-color: white }@else{ background-color: grey; } ; }
# @for
基本語法(1) to 不包含結束值
@for $var from 起始值 to 結束值{ }
範例
$cols: 4; @for $col from 1 to $cols{ .col-#{$col}{ width: 100% / $cols * $col; } }
基本語法 (2) through 包含結束值
@for $var from 起始值 through 結束值{ }
範例
$cols: 4; @for $col from 1 through $cols{ .col-#{$col}{ width: 100% / $cols * $col; } }
那之前純手刻還拿出計算機計算的 12 欄網格系統
.col-1 {
width: 8.33333%; }
.col-2 {
width: 16.66667%; }
.col-3 {
width: 25%; }
.col-4 {
width: 33.33333%; }
.col-5 {
width: 41.66667%; }
.col-6 {
width: 50%; }
.col-7 {
width: 58.33333%; }
.col-8 {
width: 66.66667%; }
.col-9 {
width: 75%; }
.col-10 {
width: 83.33333%; }
.col-11 {
width: 91.66667%; }
.col-12 {
width: 100%; }
在 sass 只要這樣呢!
$cols: 12;
@for $col from 1 through $cols{
.col-#{$col}{
width: 100% / $cols * $col;
}
}
這實在是……太太太太太療癒啦!
# @each
基本語法
@each $___ in $___s { }
範例
$status: sucess error warning; @each $statu in $status { .icon-#{$statu} { background-image: url('img/icons/#{$statu}'); } }
# @while
基本語法
@while _____ { }
範例
$num: 8; @while $num > 0 { .w-#{$num} { width: 10px * $num; } $num: $num - 2; }
是否有點認不出 CSS 了呢 XD?以上範例為了凸顯單項語法重點,沒綜合應用其他語法,例如可觀察到範例中有一些類似的、重複的語句,可以應用於前一篇提到的 mixin ...等技巧,同時應用,使得 SCSS 更為精簡!
參考資料
- Sass教學-使用Sass Maps|廖洧杰 (opens new window)
- SASS : SASS Maps|yuski (opens new window)
- Sass基礎》》-寧皓網 (opens new window)
- Sass教程網 (opens new window)
⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽 《For 前端小幼苗的圖解筆記》 (opens new window)