好的~上一篇已經學會了 Sass 基本的語法應用，這篇來介紹 Sass 的進階語法，讓你會一度有 CSS 是程式語言的錯覺。

先記住這兩個語法

• 定義變數variable　$variable:__
• 插值(插入變數)　#{variable}

控制指令 Control Directives

1. @if
2. @for
3. @each
4. @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; 
  }
  

  

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);
  }
  

  

函數

lighten & darken

• 基本語法

  :lighten( color, 50%)
  :darken( color, 50%)
  

• 範例

  $color-main: #00F;
  $color-main-light30: lighten($color-main, 30%);
  $color-main-dark30: darken($color-main, 30%);
  
  a{
      background-color: $color-main;
      &:hover{
          color: $color-main-light30;
      }
      &:active{
          color: $color-main-dark30;
      }
  }
  

  

hsl & hsla

一般網頁色瑪用 RGB(#00FF00)來定義，六個數字兩兩一組各代表紅色、綠色、藍色的色值，而色值是16進位制表示0~255之間(00 = 0，FF = 255）

• hsla:

  • 色相（Hue）: 0~360
  • 飽和度（Saturation）: 0 ~ 100%
  • 亮度（Lightness）: 0 ~ 100%
  • 透明度（alpha）: 0 ~ 1

• 基本語法

  hsl(0, 100%, 50%)
  hsla(0, 100%, 50%,　0.5 )
  

• 範例

  span{
      color: hsl(20, 100%, 50%);
      background-color: hsla(20, 100%, 50%, 0.5);
  }
  
  

  

是否有點認不出 CSS 了呢 XD？以上範例為了凸顯單項語法重點，沒綜合應用其他語法，例如可觀察到範例中有一些類似的、重複的語句，可以應用於前一篇提到的 mixin ...等技巧，同時應用，使得 SCSS 更為精簡!

參考資料

• 顏色空間(HSV/HSB與HLS)的區別|ITREAD01.COM
• Sass教學-使用Sass Maps|廖洧杰
• SASS : SASS Maps|yuski
• Sass基礎》》-寧皓網
• Sass教程網

個人 Blog: https://eudora.cc/