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