小程序wxss;css中使用变量

2021-09-03 本文已影响0人姬歌

我们在写样式的时候，可能一个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里声明，
$\color{purple}{也可以在app.wxss里面的page里面统一声明！}$ ，就能在所有页面里使用。