我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。
所以我们可以使用变量来优化。
在html, css里面，它原始的定义方式及使用方法是这样的
<style>
:root {
--theme-green: #00ff00;
}
.my-div {
color: var(--theme-green);
}
</style>
其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。
使用的时候，用var()函数进行调用。
注意：约定变量名须以两个连字符'--'开头
在小程序中，用法基本也是一样的：
我们在wxss页面中进行定义
page {
--theme-green: #00ff00;
}
.my-title {
color: var(--theme-green);
}
注意，page选择器是选中整个页面，前面是没有'.'号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。
你也可以在wxml里面直接使用！
<view style="color:var(--theme-green);">也可以直接在wxml里面使用wxss变量！</view>
这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，
，就能在所有页面里使用。
网友评论