동적 주입을 위한 내장 기능이 없다면 LESS에서 동적 속성 이름을 어떻게 사용할 수 있습니까?

LESS에서 동적 속성 및 속성 이름 보간 사용

CSS SASS와 같은 일부 프로그래밍 프레임워크는 @ 구문을 사용하여 속성 이름의 동적 삽입을 지원합니다. 속성의 이름과 값을 선택기에 삽입할 수 있습니다. 여러 규칙에 걸쳐 공통 속성을 재정의하고, 변환을 적용하고, 직접 선언하지 않고도 복잡한 스타일을 관리할 수 있는 좋은 방법입니다.

안타깝게도 LESS에는 이러한 기능이 없지만 다양한 매개변수 혼합 조합을 사용하여 몇 가지 해결 방법을 제공합니다. -ins, 변수 주입(e() 함수) 및 패턴 일치(@{ }) 구문.

옵션 1: e() 함수를 사용하여 속성 이름 주입

이 방법에는 동적으로 생성된 속성 이름을 다른 속성의 값에 삽입하는 작업이 포함됩니다. 비정상적이지만 작업은 수행됩니다.

.vendors(@property, @value...){
    -webkit-@{e(@property)}: @value;
       -moz-@{e(@property)}: @value;
        -ms-@{e(@property)}: @value;
         -o-@{e(@property)}: @value;
            @{e(@property)}: @value;
}

옵션 2: 다음 클래스 이름에 속성 주입(v1.3.3 미만)

이 방법에는 공급업체 정의가 포함됩니다. 혼합한 다음 공급업체 속성을 포함하는 가상 클래스/규칙 세트를 구성합니다. 그런 다음 ~ 구문을 사용하여 두 공급업체 블록을 함께 바인딩하는 다음 클래스가 구성됩니다.

.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*/};
}

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

옵션 3: 재귀를 사용하여 속성 주입(v1.4.0 미만)

이 방법은 v1.4를 덜 사용할 때 이전 방법의 제한 사항을 해결하며 재귀를 도입하여 공급업체 블록을 구성하고 이를 최종 변수에 삽입합니다.

@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);
}

@properties: "transform-origin" "transform";
@values: "10px 10px" "matrix(2,0,0,2,20,20)";

@p: ~"@{nl}width:20px; @{nl}height:12px; @{nl}background-color:#000;";

.this-class {
    .multi(@properties,@values,2,@p);
    @inj: ~"{@{inject}`'\n'`} `'\n'`.next-class ";
    @{inj} {/**/}
}

이러한 해결 방법은 동적 속성을 생성하는 방법을 제공합니다. 다른 프레임워크의 내장 기능을 사용하는 것만큼 우아하지는 않지만 LESS의 이름입니다. LESS 1.6이 출시되면서 동적 속성 이름 보간이 구현되어 이 프로세스가 훨씬 간단해졌습니다. 구문은 속성 이름에 @{ }를 사용하는 옵션 2와 유사합니다.

위 내용은 동적 주입을 위한 내장 기능이 없다면 LESS에서 동적 속성 이름을 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!