#12 [CSS] Sass 入門教學-新手上路重點摘要(下)

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


先記住這兩個語法

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

控制指令 Control Directives

  1. @if
  2. @for
  3. @each
  4. @while

@if

  • 基本語法

    1
    2
    3
    @if{

    }
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $theme: "dark";

    body{
    @if $theme == dark {
    background-color: black
    }@else if $theme == light {
    background-color: white
    }@else{
    background-color: grey;
    } ;
    }


@for

  • 基本語法(1) to 不包含結束值
    1
    2
    3
    @for $var from 起始值 to 結束值{

    }
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8

    $cols: 4;

    @for $col from 1 to $cols{
    .col-#{$col}{
    width: 100% / $cols * $col;
    }
    }

  • 基本語法 (2) through 包含結束值
    1
    2
    3
    @for $var from 起始值 through 結束值{

    }
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9

    $cols: 4;

    @for $col from 1 through $cols{
    .col-#{$col}{
    width: 100% / $cols * $col;

    }
    }

噢噢噢天啊~那之前純手刻還拿出計算機計算的 12 欄網格系統

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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 只要這樣呢!

1
2
3
4
5
6
7
$cols: 12;

@for $col from 1 through $cols{
.col-#{$col}{
width: 100% / $cols * $col;
}
}

這實在是……太太太太太療癒啦!


@each

  • 基本語法

    1
    2
    3
    @each $___  in $___s {

    }
  • 範例

    1
    2
    3
    4
    5
    6
    7
    $status: sucess error warning;

    @each $statu in $status {
    .icon-#{$statu} {
    background-image: url('img/icons/#{$statu}');
    }
    }


@while

  • 基本語法

    1
    2
    3
    @while _____ { 

    }
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $num: 8;

    @while $num > 0 {
    .w-#{$num} {
    width: 10px * $num;
    }

    $num: $num - 2;
    }


Map

  • 基本語法
    1
    2
    3
    4
    $variable: (
    key: value,
    key: value
    );
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $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

  • 基本語法

    1
    2
    :lighten( color, 50%)
    :darken( color, 50%)
  • 範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $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
  • 基本語法

    1
    2
    hsl(0, 100%, 50%)
    hsla(0, 100%, 50%, 0.5 )
  • 範例

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


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


參考資料


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

Comments