[css] 如何實現換膚功能？

css 換膚常見方案
是通過 less/sass/postcss 等css 預處理器，通過它們自身的變量用法，設置不同變量，生成不同的主題樣式，但是這些樣式都是會被打包成常量，我們只能在編譯之前修改變量，打包出對應的css 文件。

而如今出現了 css var 。此種變量是可以通過 js 改變變量值的。 demo
一般的插件在編譯 css 時會將變量打包成常量，但是 postcss 有一個插件 postcss-advanced-variables 是支持直接打包為 css 變量的。 這將意味著我們可以僅僅覆蓋 css 變量，或者 js 修改變量值都能改變主題色。
這里介紹一個成熟的打包變量插件，postcss-ui-theme (一波軟廣🤣， 支持 sass 語法， bem 規范命令，resolve 靜態資源等強大功能。是自己非常成熟的沉淀物)

打包的代碼如圖

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] 如何实现换肤功能？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。