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

Mary-Kate Olsen
풀어 주다: 2024-11-07 13:18:03
원래의
495명이 탐색했습니다.

How can I achieve dynamic property names in LESS to apply cross-browser vendor prefixes?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿