鑑於 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中文網其他相關文章！