LESS와 같은 CSS 전처리기를 사용하면 변수와 논리를 기반으로 CSS를 동적으로 생성할 수 있습니다. 일반적인 작업 중 하나는 크로스 브라우저 공급업체 접두사를 CSS 속성에 적용하는 CSS 규칙을 만드는 것입니다.
LESS는 현재 동적 속성 이름에 대한 직접적인 지원을 제공하지 않습니다. 그러나 유사한 기능을 구현하기 위해 해결 방법을 사용할 수 있습니다.
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)); }
재귀를 사용하여 다음 클래스의 이름에 속성을 삽입할 수도 있습니다.
.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부터 속성 이름 보간이 직접 구현됩니다.
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!