scss for

Posted on In

scss for(반복문)

css 도 javascript 와 같이 for문을 이용하여 웹상에서 이용가능하다.

1
2
3
4
5
6
@for $i from 1 through 10{
  .box:nth-child(#{$i}){
  //변수를 감싸줄때는 #{}으로 감싸주고 표현할 필요가 있다
    width:100px-#{$i}px;
  }
}

위와 같은 함수는 여러번 반복되지만 조금씩 다른 표현이 필요할 때 사용할 수 있다.
조금씩 작아지거나 순차적으로 커지는 css 표현에서도 사용가능하며 짝수 홀수에 따라 나눠질때도 표현이
가능하다고 생각한다

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
40
///위의 for문 실행시에 표시되는 css
.box:nth-child(1) {
  width: 100px- 1px;
}

.box:nth-child(2) {
  width: 100px- 2px;
}

.box:nth-child(3) {
  width: 100px- 3px;
}

.box:nth-child(4) {
  width: 100px- 4px;
}

.box:nth-child(5) {
  width: 100px- 5px;
}

.box:nth-child(6) {
  width: 100px- 6px;
}

.box:nth-child(7) {
  width: 100px- 7px;
}

.box:nth-child(8) {
  width: 100px- 8px;
}

.box:nth-child(9) {
  width: 100px- 9px;
}

.box:nth-child(10) {
  width: 100px- 10px;
}