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