LESS: 동적 속성 또는 속성 이름 보간에서 속성 이름에 변수를 사용하는 방법은 무엇입니까?

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

LESS로 작업할 때 동적 값을 기반으로 CSS 속성 이름을 사용자 정의하는 것이 어려울 수 있습니다. . 이 질문은 동적 속성과 값을 허용하는 공급업체별 CSS 믹스인을 복제하기 위한 제한 사항과 해결 방법을 탐구합니다. Sass에서 이러한 믹스인은 속성 이름 보간법을 활용합니다.

LESS의 제한 사항:

현재 LESS에는 동적 속성 이름 생성에 대한 기본 지원이 부족합니다. 이로 인해 공급업체 접두사 mixin을 LESS에서 직접 복제하는 것이 불가능해졌습니다.

해결 방법:

이러한 제한에도 불구하고 다음 해결 방법은 대체 방법을 제공합니다.

1. 동적으로 생성된 속성을 속성 값에 삽입:

동적 속성과 값을 "vendor"와 같은 일반 속성에 래핑하고 다른 속성의 값에 삽입합니다. 속성.

예:

.vendors(@property, @value) {
  -inj: "~"@{property}: @{value}"";
}

.test {
  .vendors(transform, matrix(1, 0, 0, 1, 20, 20));
}

2. 다음 클래스의 이름에 동적으로 생성된 속성을 삽입합니다.

공급업체 믹스인 개념을 확장합니다. 이후 클래스가 이름에 공급업체 규칙을 삽입하는 여러 클래스를 만듭니다.

예:

.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}"): {};
}

.this-class {
  .test(next-class);
}

LESS v1.4.0에 대한 업그레이드된 해결 방법 :

@nl: `"\n\t"`;
.multi(@props, @vals, @i, @inj) {
  // extract property and value from lists
  @property: extract(@props, 1);
  @value: extract(@vals, 1);

위 내용은 LESS: 동적 속성 또는 속성 이름 보간에서 속성 이름에 변수를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!