首頁  >  文章  >  web前端  >  如何在 LESS 中實作動態屬性名稱以套用跨瀏覽器供應商前綴?

如何在 LESS 中實作動態屬性名稱以套用跨瀏覽器供應商前綴?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-07 13:18:03440瀏覽

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:"") {
    @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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn