uniapp发布成微信小程序 var设置动态样式失效

一、语法

• --*来声明变量名
• var(--*)来使用变量

补充：css 自定义属性使用中，var()允许接受第二个参数，当做缺省值，在使用时最好都填写一个缺省值，第二个参数也可以是另一个自定义属性

body {
  --default-color: pink;
  --font-base: 12px;
  background-color: var(--default-color);
}
.button {
  background-color: var(--theme-color, pink); // 可接受第二个参数
  font-size: var(--font-ls, --font-base);
}

二、运用

1、全局变量和局部变量

在:root 代码块中声明全局变量

在选择器中声明的为局部变量，局部变量会覆盖全局变量

:root { // 全局变量
  --font-base: 14px;
}
.section-item { // 局部变量
  color: var(--text-color);
}

2、calc() 函数常常被用于跨单位的计算,css 自定义属性也可以参与到 calc 的计算中

3、自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作，可以动态改变自定义属性的值

三、小程序中使用

基础用法

• web 开发中全局变量是定义在:root，小程序使用时，在 page 中定义变量
• 在 app.acss 中的变量可以在全局各个页面中使用，同样也可以在各个页面独立定义页面专属的 css 变量

/* /app.acss --> */
page {
  --base-color: #409eff;
  --warning: #e6a23c;
  --danger: #f56c6c;
  --info: #909399;
  --success: #67c23a;
  ......;
}

/* 这样既可以在web端使用又可以在小程序上使用 */
:root,page {
   --primary-color: rgb(32, 115, 244); // 默认主题颜色
   --secondary-color: #f04864; // 次要颜色
   --background-color: #fff; // 背景颜色
   ......;
}

参考文档：小程序中使用全局样式 - 简书