鉴于 LESS 没有内置的动态注入功能，如何在 LESS 中使用动态属性名称？

在 LESS 中使用动态属性和属性名称插值

一些编程框架（如 CSS SASS）支持使用 @ 语法动态注入属性名称，允许您将属性的名称和值注入选择器。这是跨多个规则覆盖公共属性、应用转换和管理复杂样式而无需直接声明它们的好方法。

不幸的是，LESS 缺乏这样的功能，但它确实提供了一些使用参数混合的各种组合的解决方法-ins、变量注入（e() 函数）和模式匹配（@{ }）语法。

选项 1：使用 e() 函数注入属性名称

此方法涉及将动态创建的属性名称注入到另一个属性的值中。尽管不优雅，但它确实完成了工作。

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

选项 2：将属性注入以下类名（小于 v1.3.3）

此方法涉及定义供应商混合，然后构建包含供应商属性的虚拟类/规则集。然后使用 ~ 语法构造下一个类，将两个供应商块绑定在一起。

.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);
}

选项 3：使用递归注入属性（Less v1.4.0 ）

此方法解决了前一个方法在使用 less v1.4 时的局限性，引入递归来构造供应商块并将其注入最终变量。

@nl: `"\n\t"`; 

.multi(@props,@vals,@i,@inj) {
    @property: extract(@props, 1);
    @value: extract(@vals, 1);
    @inject:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
}

.multi(@props,@vals,@i,@inj:"") when (@i > 0) {
    @property: extract(@props, @i);
    @value: extract(@vals, @i);
    @injnext:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};";
    .multi(@props,@vals,(@i - 1),@injnext);
}

@properties: "transform-origin" "transform";
@values: "10px 10px" "matrix(2,0,0,2,20,20)";

@p: ~"@{nl}width:20px; @{nl}height:12px; @{nl}background-color:#000;";

.this-class {
    .multi(@properties,@values,2,@p);
    @inj: ~"{@{inject}`'\n'`} `'\n'`.next-class ";
    @{inj} {/**/}
}

这些解决方法提供了一种创建动态属性的方法LESS 中的名称，尽管它不如使用其他框架的内置功能那么优雅。随着 LESS 1.6 的发布，实现了动态属性名称插值，使这个过程变得更加简单。语法与选项 2 类似，使用 @{ } 作为属性名称。

以上是鉴于 LESS 没有内置的动态注入功能，如何在 LESS 中使用动态属性名称？的详细内容。更多信息请关注PHP中文网其他相关文章！