[CSS] Sass 新手入門(2)-變數、Map、流程控制指令 | The Way Forward

續上一篇 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 更為精簡!

參考資料

⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽《For 前端小幼苗的圖解筆記》 (opens new window)