Sass - 流程控制

@if

與其他程式語言一樣，Sass 的條件判斷也分為 @if、@else if、@else。

// scss
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
// css
p {
  color: green;
}

@for

Sass 提供的 for 迴圈重複運算，其概念與一般程式中的 for 迴圈概念相同，需給定迴圈的「起始值」與「終止值」，它有兩種格式，且判斷條件不需用括號包起來。

• @for $i from $start through $end

  • 變數 $i 僅作爲清單 (List) 中元素都編號。
  • 條件範圍包含 start 與 end 的值，start 和 end 必須是整數值。

• @for $i from $start to $end

  • 變數 $i 僅作爲清單 (List) 中元素都編號。
  • 條件範圍只包含 start 的值不包含 end 的值， start 和 end 必須是整數值。

// scss
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}
// css
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@while

@while 迴圈，很少會用到。

// scss
$i: 6;
@while $i>0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

// css
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

@each

Sass 提供的 each 迴圈 針對陣列（List）或物件（Map）等資料結構中的每一項元素進行迭代運算，它以符號 @each 進行迴圈運算。

@each 用在 list 和 map 的提取，$var 可以任何自取的變數名稱，動態帶入 list 或 map 中的每個項目。

@each $var in {…}

// scss

$list: orange, purple, teal;

@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

// css
.orange {
  background: orange;
}

.purple {
  background: purple;
}

.teal {
  background: teal;
}

• @each 進行多參數迭代

@each 會依序從陣列中逐一取出值並對應前面的變數。

// scss
@each $name, $color, $bgcolor in (box1, red, black), (box2, green, black), (box3, blue, black) {
  .#{$name} {
    width: 100px;
    height: 100px;
    color: $color;
    background-color: $bgcolor;
  }
}

// css
.box1 {
  width: 100px;
  height: 100px;
  color: red;
  background-color: black;
}

.box2 {
  width: 100px;
  height: 100px;
  color: green;
  background-color: black;
}

.box3 {
  width: 100px;
  height: 100px;
  color: blue;
  background-color: black;
}

• @each 與 Map

注意 Map 最後要有分號。

// scss
$themes: (
  'primary': blue,
  'danger': red
);
@each $key, $value in $themes {
  .btn-#{$key} {
    background: $value;
  }
}

// css
.btn-primary {
  background: blue;
}

.btn-danger {
  background: red;
}

• Map 裡面的 Map

$share-map: (
  'facebook': (
    'pic': 'facebook.png',
    'color': #3c5998
  ),
  'google': (
    'pic': 'google.png',
    'color': #cb3726
  ),
  'email': (
    'pic': 'email.png',
    'color': #666666
  )
);

// $key 將會取出 facebook , $value 取出裡面的值
@each $key, $value in $share-map {
  $pic: map-get($value, 'pic'); //取出 facebook 的  pic
  $color: map-get($value, 'color'); //取出 facebook 的  color

  .#{$key} {
    //將 facebook 轉型，變成 class name
    background-image: $pic;
    background-color: $color;
  }
}