LESS 等 CSS 預處理器可讓您根據變數和邏輯動態產生 CSS。一項常見任務是建立將跨瀏覽器供應商前綴應用於 CSS 屬性的 CSS 規則。
LESS 目前不提供動態屬性名稱的直接支援。但是,您可以使用變通方法來實現類似的功能。
在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)); }
您也可以使用遞歸將屬性注入到下一個類別的名稱:
.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 版本開始,直接實作屬性名稱內插:
.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中文網其他相關文章!