本文介绍在微信小程序中如何使用CSS变量（CSS Variables）解决样式静态化的问题。通过定义CSS自定义属性，结合JavaScript动态修改style属性，实现页面样式的实时动态更新。文章涵盖基础用法、层级继承规则以及JS与WXML/WXSS联动的完整代码示例，帮助开发者掌握动态样式控制的技巧。
小程序CSS变量基础与动态控制原理
在Sass或Stylus等预处理器中，使用变量进行样式设计十分便捷。实际上，原生CSS也支持变量定义。由于微信小程序原生环境不支持动态CSS语法，采用CSS变量可以有效简化开发流程，提升开发效率。
基本用法
基础用法
<!--web开发中顶层变量的key名是:root，小程序使用page-->
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);
}提升用法
<div class="one">
<div class="two">
<div class="three">
</div>
<div class="four">
</div>
<div>
</div>
.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变量实现JS动态修改样式
妙用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
<!--将css变量(js中设置的那些)赋值给style-->
<view class="container">
<view class="my-view" style="{{viewData.style}}">
<image src="/images/abc.png" mode="widthFix"/>
</view>
</view>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的属性值。
代码片段
https://developers.weixin.qq.com/s/aWfUGCmG7Efe
github
小程序演示
至此，关于在小程序中使用CSS变量（使JS可以动态设置CSS样式属性）的介绍已完毕。如需了解更多相关小程序使用CSS变量的内容，请搜索本站历史文章或继续浏览后续文章，感谢大家的支持！