#24 - 반복문 (@each)

@each

list data와 Map data를 반복할 때 사용한다.

 

#list / Map Data 설명 보기

#3 - Sass & SCSS 주석과 데이터의 종류

#3 - Sass & SCSS 주석과 데이터의 종류

 

List Data와 @each

SCSS 기본 구조

@each $변수 in 데이터{
    /* 반복 내용 */
}

 

SCSS

$color-list : red, orange, yellow, green;

.class{
    @each $color in $color-list{
        li.#{$color} {
            background : url("./img/#{$color}.png");
        }
    }
}

Compile 된 CSS

.class{
    li.red {
        background : url("./img/red.png");
    }
    li.orange {
        background : url("./img/orange.png");
    }
    li.yellow {
        background : url("./img/green.png");
    }
    li.green {
        background : url("./img/green.png");
    }
}

 

SCSS 기본 구조

@each $키변수이름, $값변수이름 in 데이터{
    /* 반복 내용 */
}

SCSS

index()는 map-data에서는 처리가 불가능해서 아래 내장함수를 이용하여 list-data로 변환해서 사용해야 한다.

1. map-keys($데이터이름) : 맵데이터의 키를 리스트화
2. map-values($데이터이름) : 맵 데이터의 값을 리스트화

 

$color-data : (
    red : apple,
    orange : orange, 
    yellow : banana, 
    green : grape
);
/* $color-data에서 키는 $colors, 값은 $fruits로 이름을 지정  */
@each $colors, $fruits in $color-data{
    /* $color-data-index = 맵 데이터의 키($colors)를 리스트화 */
    $color-data-index : map-keys($color-data);
    /* $color-data-index에서 해당되는 컬러가 몇번째 인지 숫자를 구함 */
    $index : index($color-data-index, $colors);
    .li-#{$colors} {
        width : 10px * $index;
        background : url("./img/#{$fruits}.png");
    }
}

Compile 된 CSS

li-red {
    width : 10px;
    background : url("./img/apple.png");
}
li-orange {
    width : 20px;
    background : url("./img/orange.png");
}
li-yellow {
    width : 30px;
    background : url("./img/banana.png");
}
li-green {
    width : 40px;
    background : url("./img/grape.png");
}