크로스 브라우저 벤더 접두사를 적용하기 위해 LESS에서 동적 속성 이름을 얻으려면 어떻게 해야 합니까?

LESS의 속성 이름 변수

LESS와 같은 CSS 전처리기를 사용하면 변수와 논리를 기반으로 CSS를 동적으로 생성할 수 있습니다. 일반적인 작업 중 하나는 크로스 브라우저 공급업체 접두사를 CSS 속성에 적용하는 CSS 규칙을 만드는 것입니다.

LESS 동적 속성 이름

LESS는 현재 동적 속성 이름에 대한 직접적인 지원을 제공하지 않습니다. 그러나 유사한 기능을 구현하기 위해 해결 방법을 사용할 수 있습니다.

해결 방법 1: e() 및 @{ } 사용

1.6 미만 LESS 버전에서는 e() 및 @{ }를 사용할 수 있습니다. 속성 이름을 동적으로 삽입하려면:

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

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

해결 방법 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}") {/*next class properties*/};
}

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

LESS 1.6의 속성 이름 보간

LESS 버전 1.6부터 속성 이름 보간이 직접 구현됩니다.

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

/*example*/
.test {
    .vendor(transform, translateX(20px));
}

위 내용은 크로스 브라우저 벤더 접두사를 적용하기 위해 LESS에서 동적 속성 이름을 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!