使用sass,stylus可以很方便的使用變量來做樣式設(shè)計(jì)，其實(shí)css也同樣可以定義變量，在小程序中由于原生不支持動(dòng)態(tài)css語法，so，可以使用css變量來使用開發(fā)工作變簡單。

基礎(chǔ)用法

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; }

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

class="two" 對(duì)應(yīng)的節(jié)點(diǎn): 10px

class="three" 對(duì)應(yīng)的節(jié)點(diǎn): element: 2em

class="four" 對(duì)應(yīng)的節(jié)點(diǎn): 10px (繼承自父級(jí).two)

class="one" 對(duì)應(yīng)的節(jié)點(diǎn): 無效值, 即此屬性值為未被自定義css變量覆蓋的默認(rèn)值

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

妙用css變量

開發(fā)中經(jīng)常遇到的問題是，css的數(shù)據(jù)是寫死的，不能夠和js變量直通，即有些數(shù)據(jù)使用動(dòng)態(tài)變化的，但css用不了。對(duì)了，可以使用css變量試試呀

js// 在js中設(shè)置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變量就可以動(dòng)態(tài)設(shè)置css的屬性值

作者：天天修改

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。