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

創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)站重做改版、衡東網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為衡東等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

基本用法

基礎(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): 無(wú)效值, 即此屬性值為未被自定義css變量覆蓋的默認(rèn)值

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

妙用css變量

開(kāi)發(fā)中經(jīng)常遇到的問(wèn)題是，css的數(shù)據(jù)是寫(xiě)死的，不能夠和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);
}

通過(guò)css變量就可以動(dòng)態(tài)設(shè)置css的屬性值

代碼片段

https://developers.weixin.qq.com/s/aWfUGCmG7Efe

github

小程序演示

到此這篇關(guān)于小程序中使用css var變量的文章就介紹到這了,更多相關(guān)小程序使用css var變量?jī)?nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！