LESS에서 속성 이름에 변수 사용(동적 속성/속성 이름 보간)

LESS는 주제에 대한 일부 논의에도 불구하고 현재 동적으로 삽입된 속성을 지원하지 않습니다. 스택 오버플로.

해결 방법 #1: 동적으로 생성된 속성을 속성 값에 삽입

이것은 해결 방법은 동적으로 생성된 속성을 하드 코딩된 속성 값에 삽입합니다.

.vendors(@property, @value, @pre: ect) {
  -inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

해결 방법 #2: 동적으로 생성된 속성을 다음 클래스의 이름에 삽입(LESS

이 해결 방법은 다음 클래스 또는 규칙 세트를 구성합니다. 공급업체를 포함하고 다음 클래스인

.vendors(@property, @value, @rest:"") {
  @inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};";
}

.test(@nextclass){
  .vendors(transform, "matrix(2,0,0,2,20,20)");
  .vendors(transform-origin,"10px 10px", @inject);
  (~"{@{inject}} .@{nextclass}"){/*next class properties*/};
}

해결 방법 #3: 동적으로 생성된 속성을 다음 클래스의 이름에 삽입(LESS 1.4.0)

이 버전은 LESS 1.4의 제한 사항을 극복하기 위해 재귀를 사용합니다. .0:

@nl: `"\n\t"`;

.multi(@props,@vals,@i,@inj) {
  @property: extract(@props, 1);
  @value: extract(@vals, 1);
  @inject:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
}

.multi(@props,@vals,@i,@inj:"") when (@i > 0) {
  @property: extract(@props, @i);
  @value: extract(@vals, @i);
  @injnext:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
  .multi(@props,@vals,(@i - 1),@injnext);
}

LESS 버전 1.6 이상에서는 속성 이름 보간이 기본적으로 구현되므로 해결 방법이 필요하지 않습니다.