변수를 사용하여 LESS에서 속성 이름을 동적으로 생성하려면 어떻게 해야 합니까?

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 < 1.4.0)

이 해결 방법은 가상 공급업체를 포함하고 다음 클래스를 반복적으로 빌드하는 클래스 또는 규칙 세트:

.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: 동적으로 생성된 속성을 다음 클래스의 이름에 삽입(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 이상에서는 속성 이름 보간이 기본적으로 구현되므로 해결 방법이 필요하지 않습니다.
위 내용은 변수를 사용하여 LESS에서 속성 이름을 동적으로 생성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!