小程序wxss;css中使用变量

html-css013

小程序wxss;css中使用变量,第1张

我们在写样式的时候，可能一个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中使用！