如何在 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中文网其他相关文章！