CSS3 变量 var() 使用小记

文章摘要moonshot-v1-8k

Standby API Responsing..

在CSS中定义全局变量

平时我们使用css来填充颜色时一般直接采取对于HEX色值即可，但这样往往会显得很囊肿而且不宜维护（如果需要整体更换色调会非常麻烦）对于主题色调来说，更改一次实现全局应用才是硬道理..

定义变量

为了实现以上效果我们需要使用 css3 新特性 var() 来定义全局变量并使用。首先我们在 :root 内定义变量名（注意定义该变量应在全局css中定义以确保全站使用），格式如下

:root {
      --theme-color-pri: #eb6844;
      --theme-color-sec: #2b2b2b;
      //包括但不限于颜色，字体大小等等
      --size: 12;
      --default-size: 1rem;
  }

使用变量

变量定义完成后即可在任意页面调用已设置的变量，使用方式如下

div {
      color: var(--theme-color-pri);
      background: var(--theme-color-sec);
      
      font-size: var(--default-size);
  }

额外配置

以上为简单使用流程，但有时候也会有特殊情况

变量错误使用

变量不存在或变量格式错误时，可以采取备用属性（如果找不到第一个变量使用第二个具体值代替）

div.backup {
      color: var(--theme-color-pri,orange);
  }

上面是使用具体值做backup，如果需要使用设定好的变量做backup需要做以下配置（如果第一个变量已存在，则不会使用第二个变量）：

不能写成：var(–color,–color1,blue)

div.backup-var {
      color: var(--theme-color-pri,var(--theme-color-sec));
  }

结合 calc() 使用

当var和calc使用的时候，var所获取的对象只能为数字，外乘或除(n)px，类似px这种单位不能直接跟在var的后面

不能写成：font-size:calc(1 * var(–size)px)

div.calc {
      font-size: calc(1px * var(--size));
  }

使用 js 操作 var 属性

使用 getPropertyValue 和 setProperty 来进行设置

//获取标签上style的var属性
  element.style.getPropertyValue("--size");
  //获取非标签上style的var属性
  getComputedStyle(element).getPropertyValue("--size");
  
  //设置style上的var属性
  element.style.setProperty("--size", 20);

其他事项

兼容

老生常谈的问题了，在 Can I use 中查询各浏览器的兼容性，结果如下

Opera Mini / IE全挂233（好在新版 Edge 完美支持）

利弊

好处是便于维护了，缺点有增加了文件大小，不足在兼容性。

色板

附一份网站的色板

:root{
    --theme-color: #eb6844;
    --preset-c: #cccccc;
    --preset-d: #dadada;
    --preset-f: #ffffff;
    --preset-fa: #fafafa;
    --preset-s: #f5f5f5;
    --preset-6: #666666;
    --preset-8: #888888;
    --preset-9: #949494;
    --preset-4a: #4a4a4a;
    --preset-3a: #3a3a3a;
    --preset-2b: #2b2b2b;
    --preset-link: #334768;
    --preset-okay: #4fc323;
    --preset-okay-l: #f6fff0;
    --preset-caution: #f9ac1d;
    --preset-caution-l: #fffbeb;
    --preset-alert: #f4222c;
    --preset-alert-l: #fff1f0;
  }

以上，有问题评论留言反馈。