使用sass,stylus可以很方便的使用變量來做樣式設計，其實css也同樣可以定義變量，在小程序中由于原生不支持動態css語法，so，可以使用css變量來使用開發工作變簡單。

基礎用法

page {

--main-bg-color: brown;

}

.one {

color: white;

background-color: var(--main-bg-color);

margin: 10px;

}

.two {

color: white;

background-color: black;

margin: 10px;

}

.three {

color: white;

background-color: var(--main-bg-color);

}

提升用法

.two { --test: 10px; }

.three { --test: 2em; }

在這個例子中，var(--test)的結果是：

class="two" 對應的節點: 10px

class="three" 對應的節點: element: 2em

class="four" 對應的節點: 10px (繼承自父級.two)

class="one" 對應的節點: 無效值, 即此屬性值為未被自定義css變量覆蓋的默認值

上述是一些基本概念，大致說明css變量的使用方法，注意在web開發中，我們使用:root來設置頂層變量，更多詳細說明參考MDN的 文檔

妙用css變量

開發中經常遇到的問題是，css的數據是寫死的，不能夠和js變量直通，即有些數據使用動態變化的，但css用不了。對了，可以使用css變量試試呀

js// 在js中設置css變量

let myStyle = `

--bg-color:red;

--border-radius:50%;

--wid:200px;

--hgt:200px;`

let chageStyle = `

--bg-color:red;

--border-radius:50%;

--wid:300px;

--hgt:300px;`

Page({

data: {

viewData: {

style: myStyle

}

},

onLoad(){

setTimeout(() => {

this.setData({'viewData.style': chageStyle})

}, 2000);

}

})

wxml

wxss/* 使用var */

.my-view{

width: var(--wid);

height: var(--hgt);

border-radius: var(--border-radius);

padding: 10px;

box-sizing: border-box;

background-color: var(--bg-color);

transition: all 0.3s ease-in;

}

.my-view image{

width: 100%;

height: 100%;

border-radius: var(--border-radius);

}

通過css變量就可以動態設置css的屬性值

作者：天天修改

總結

以上是生活随笔為你收集整理的小程序使用css变量,小程序使用css变量实现“换肤”方案的全部內容，希望文章能夠幫你解決所遇到的問題。

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