CSS 变量使用

新版本的 css 支持定义变量，其语法样式为: --变量名: 值，（less中只用@定义）定义的变量通过 var 关键字来使用：

1.局部变量

举例说明：

.box {
  --my-cusotm-color: pink;
  backgound-color: var(--my-cusotm-color);
}

上述代码中定义的变量只能用在 .box 盒子及后代元素上

注意：如果多次定义，会优先使用最近的变量

2.全局变量

如果希望整个页面都能使用这个变量，可以这样定义：小程序全局定义在page {}，网页中:root {}

page {
  --my-cusotm-color: pink;
}

.box {
  backgound-color: var(--my-cusotm-color, #ffffff);
}
.navs {
  backgound-color: var(--my-cusotm-color);
}

注意：var(--my-cusotm-color, #ffffff); 第二个参数为默认值，如果这个变量没有定义会使用默认值

3.使用

举例：修改 css 变量覆盖原来样式

说明：通过调式面板，查看组件元素中用到的css变量进行覆盖，var(--my-container-margin)，找到变量进行修改

page {
  --cell-large-title-font-size: 30rpx;
  --cell-text-color: #c3c3c5;
  --cell-value-color: #686868;
}

4. 盒子滑动：溢出自动

overflow-x : auto   实现左右滑动
overflow-y : auto   实现上下滑动

5.拓展：Sass变量使用

定义

$a : rgb (188, 188, 188);

使用

.box {

color : $a

}