我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。
所以我们可以使用变量来优化。
在html, css里面，它原始的定义方式及使用方法是这样的
其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。
使用的时候，用var()函数进行调用。
注意：约定变量名须以两个连字符'--'开头
在小程序中，用法基本也是一样的：
我们在wxss页面中进行定义
注意，page选择器是选中整个页面，前面是没有'.'号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。
你也可以在wxml里面直接使用！
这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，
，就能在所有页面里使用。
方法一：使用原生js操作dom的方法，来改变css的样式，比如
document.getElementById(id).style.property =newstyle
这里的new style 里面就可以使用js传入的变量。
此方法固然可以，但是对应改变一些复杂的css，比如动画什么的，操作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！
方法二：
利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！
![javascript for循环简写，如何简写data:[]中的值](/aiimages/javascript+for%E5%BE%AA%E7%8E%AF%E7%AE%80%E5%86%99%EF%BC%8C%E5%A6%82%E4%BD%95%E7%AE%80%E5%86%99data%3A%5B%5D%E4%B8%AD%E7%9A%84%E5%80%BC.png)
