网站设计与开发专家,wordpress 推广 插件,泉州专业做网站,免费手机做网站使用sass,stylus可以很方便的使用变量来做样式设计#xff0c;其实css也同样可以定义变量#xff0c;在小程序中由于原生不支持动态css语法#xff0c;so#xff0c;可以使用css变量来使用开发工作变简单。基础用法page {--main-bg-color: brown;}.one {color: white;backg…使用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)的结果是classtwo 对应的节点: 10pxclassthree 对应的节点: element: 2emclassfour 对应的节点: 10px (继承自父级.two)classone 对应的节点: 无效值, 即此属性值为未被自定义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);}})wxmlwxss/* 使用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的属性值作者天天修改
