@for
)은 변수($변수
)를 선언하고 시작(from
)해서 종료(through
)가 되기 전까지 반복할 표현식을 계속 반복적으로 출력$i
를 사용@for $변수 from 시작 through 종료 {
// 반복할 표현식
}
.frame
클래스 안에 있는 <div>
요소들의 너비(width)를 반복문을 사용하여 다르게 설정해보자.
index.html
<div class="frame">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
<div>item7</div>
<div>item8</div>
<div>item9</div>
</div>
style.scss
.frame div {
border: 3px solid black;
margin: 5px;
padding: 5px;
}
@for $i from 1 through 9 {
.frame div:nth-child(#{$i}) {
width: 50px * $i;
}
}
style.css
.frame div {
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.frame div:nth-child(1) {
width: 50px;
}
.frame div:nth-child(2) {
width: 100px;
}
.frame div:nth-child(3) {
width: 150px;
}
.frame div:nth-child(4) {
width: 200px;
}
.frame div:nth-child(5) {
width: 250px;
}
.frame div:nth-child(6) {
width: 300px;
}
.frame div:nth-child(7) {
width: 350px;
}
.frame div:nth-child(8) {
width: 400px;
}
.frame div:nth-child(9) {
width: 450px;
}
@each
)은 자바스크립트의 배열(Array) 형태를 사용하는 것이 보통이다.@each
는 @for
과 달리 시작과 종료가 반복문 안에 정해져 있지 않다.@each $변수 in $변수 {
// 반복할 표현식
}
반복문 @each를 사용하여 이미지 크기를 다르게 출력해보자.
index.html
<div class="frame">
<img src="./img.png" class="img-30px">
<img src="./img.png" class="img-60px">
<img src="./img.png" class="img-90px">
<img src="./img.png" class="img-120px">
</div>
style.scss
.frame div {
border: 3px solid black;
margin: 5px;
padding: 5px;
}
$size: 30px, 60px, 90px, 120px;
@each $size in $size {
.img-#{$size} {
width: $size;
height: $size;
}
}
style.css
.frame div {
border: 3px solid black;
margin: 5px;
padding: 5px;
}
.img-30px {
width: 30px;
height: 30px;
}
.img-60px {
width: 60px;
height: 60px;
}
.img-90px {
width: 90px;
height: 90px;
}
.img-120px {
width: 120px;
height: 120px;
}