Less의 Each 사용법

각 함수는 Less v3.7 버전의 새로운 사용법으로 템플릿 스타일을 대량으로 생성하는 데 사용됩니다.문서는 다음과 같습니다.

each Released v3.7.0

Bind the evaluation of a ruleset to each member of a list.c 규칙의 계산을 목록의 모든 구성원에게 연결합니다 Example: 예:

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

Outputs: 출력:

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

By default, each ruleset is bound, per list member, to a @value , @key , and @index variable. For most lists, @key and @index will be assigned the same value (numerical position, 1-based). However, you can also use rulesets themselves as structured lists. As in: 모든 목록 구성원은 기본적으로 귀속될 수 있습니다 @value, @key, @index 세 변수, 대부분의 목록에 대해 @key, @index 은 같은 값으로 정의됩니다 (예를 들어 1로 시작하는 시퀀스 테이블).그러나 규칙 사용자 정의 목록의 @key 값을 사용할 수도 있습니다

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

This will output: 출력 결과:

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

Since you can, of course, call mixins with guards for each ruleset call, this makes each() a very powerful function. 따라서 너는 모든 each 규칙에 대한 매개 변수를 혼합하여 설정할 수 있다. 그러면 each() 함수를 매우 유용한 함수로 만들 수 있다

Setting variable names in each()

each()에서 변수 이름 설정하기

You don't have to use @value , @key , and @index in your each() function. In Less 3.7, with the each() function, Less is introducing the concept of anonymous mixins, which may expand to other parts of the syntax at a later date. 모든 each() 함수에서 @value, @key, @index 을 변수명으로 사용할 필요가 없습니다.Less 3.7 버전에서 each() 함수 때문에 Less는 익명의 부정확한 매개 변수를 받아들일 수 있다고 설명되어 있으며, 이 특성은 다른 문법에서 An anonymous mixin uses the form of #() or .() starting with . or # just like a regular mixin would로 확장됩니다.each(), you can use it like this: 익명의 부정확한 매개 변수는 #() 또는 .() 스타일로 시작할 수 있습니다.

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

This outputs, as expected: 출력:

.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

The each() function will take the variable names defined in the anonymous mixin and bind them to the @value , @key and @index values, in that order. If you only write each(@list, #(@value) {}) , then neither @key nor @index will be defined. each() 함수는 부정확한 매개 변수의 이름을 가져와 순서대로 @value, @key, @index의value 값을 부여합니다.만약 네가 each(@list, #(@value){})만 썼다면name@key과@value는 정의되지 않을 것이다