each() 함수
[정의]
리스트 요소 각각에 대해 지정 규칙을 적용.
[구문]
each(list, rules)
[매개변수]
list
필수. 공백 또는 쉼표(,)로 구분된 값의 리스트.
rules
필수. 익명의 ruleset/maxin
※ 리스트 각 요소는 @{key), @{index}, @{value} 키워드로 접근.
※ 리스트 각 요소가 맵(key:value) 형태 X 경우. (일반적인 경우)
@{key}값과 @{index}값은 동일. (숫자색인, 1부터 시작)
※ 리스트 각 요소가 맵(key:value) 형태 O 경우. (특수한 경우)
@{key} !== @{index}.
[예제1] @{key} === @{index} 경우.
@selectors: blue, green, red;
each(@selectors, {
.sel-@{key}-@{index}-@{value} {
a: b;
}
});
[예제1 결과]
.sel-1-1-blue {
a: b;
}
.sel-2-2-green {
a: b;
}
.sel-3-3-red {
a: b;
}
[예제2] - @{key} !== @{index} 경우.
@set: {
one: blue;
two: green;
three: red;
}
.set {
each(@set, {
@{key}-@{index}: @value;
});
}
[예제2 결과]
.set {
one-1: blue;
two-2: green;
three-3: red;
}
PS. 각 ruleset 호출에 대해 guard 갖는 믹스인을 호출 가능하므로, each ()함수는 매우 강력한 함수가 됨.
each() 응용1 - 익명 믹스인 & 변수명 설정.
each() 함수에서 @value, @key, @index 사용할 필요 없음.
Less v3.7 - each() 함수 경우, 나중에 구문의 다른 부분으로 확장 가능한 익명 믹스인 개념 도입.
익명 믹스인은 정식 믹스인처럼 . 또는 # 기호로 시작하는 #() 또는.() 형식을 사용.
[예제]
.set-2() {
one: blue;
two: green;
three: red;
}
.set-2 {
// mixin 호출 후, 각 규칙 반복.
each(.set-2(), .(@v, @k, @i) {
@{k}-@{i}: @v;
});
}
[예제 결과]
.set-2 {
one-1: blue;
two-2: green;
three-3: red;
}
PS.
each() 함수는 익명 믹스인에 정의된 변수명을 가져와 @value, @key, @index 값에 순서대로 바인딩함.
만약, each (@list, #(@ value) {})만 작성하면 @key와 @index는 정의 안 됨.
each() 응용2 - range() 함수 사용한 for 반복문 모방
LESS v3.9.0 +
[예제]
each(range(4), {
.col-@{value} {
height: (@value * 50px);
}
});
[예제 결과]
.col-1 {
height: 50px;
}
.col-2 {
height: 100px;
}
.col-3 {
height: 150px;
}
.col-4 {
height: 200px;
}
최신댓글