# for 和 random()

# @for

@for $i from 0 through 3 {
  .font-#{$i} {
    font-size: 1rem * $i;
  }
}

1
2
3
4
5

# 建立網格系統

$gridNumber: 12;

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

1
2
3
4
5
6
7

# 引用外部變數

結合 list、nth()、invert 的綜合應用。

$boxBackground: blue, red, pink, orange;
$boxLength: length($boxBackground);

@for $i from 1 through $boxLength {
  .card-#{nth($boxBackground, $i)} {
    background: invert(nth($boxBackground, $i));
    color: nth($boxBackground, $i);
  }
}

1
2
3
4
5
6
7
8
9

.card-blue {
  background: yellow;
  color: blue;
}

.card-red {
  background: cyan;
  color: red;
}
// ...

1
2
3
4
5
6
7
8
9
10

# random()

預設會返回 1 ~ 100 中的值，而 random() 中只能放入 單一整數 去定義上限。如果設定 random(500) 則會返回 1 ~ 500 中的數值。

假設一個背景要做很多圓形圖案飛過的特效。條件：

每個圓形的 背景顏色 都需要不一樣
每個圓形的 移動速度 都要不一樣

$boxes: 100;

// animation mixin
@mixin move($name, $duration: 3s) {
  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(
    #{random(1000) / 1000},
    #{random(1000) / 1000},
    #{random(1000) / 1000},
    #{random(1000) / 1000}
  );
}

@for $i from 1 through $boxes {
  $name: move#{$i};
  @keyframes move#{$i} {
    from {
      left: percentage(random(100) / 100);
      top: percentage(random(100) / 100);
    }
    to {
      left: percentage(random(100) / 100);
      top: percentage(random(100) / 100);
    }
  }
  .box-#{$i} {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgb(random(255), random(255), random(255));
    color: #000;
    box-shadow: 5px 5px #000;
    @include move($name);
  }
}

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
37
38
39

試一試

← if Map →