[List_F] LESS - each() 함수 - 리스트 요소 각각에 규칙 적용. (= each함수 = 이치함수)

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;

}