如何在 LESS 中实现动态属性名称以应用跨浏览器供应商前缀？-css教程-PHP中文网

如何在 LESS 中实现动态属性名称以应用跨浏览器供应商前缀？

Mary-Kate Olsen

发布： 2024-11-07 13:18:03

原创

533 人浏览过

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:&quot;&quot;) {
    @inject:~&quot;@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};&quot;;
}

.test(@nextclass){
    .vendors(transform, &quot;matrix(2,0,0,2,20,20)&quot;);
    .vendors(transform-origin,&quot;10px 10px&quot;, @inject);
    (~&quot;{@{inject}} .@{nextclass}&quot;) {/*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中文网其他相关文章！