CSS变量——var函数

需求背景

自定义小图标的标签，当前所在的标签和鼠标经过hover都使用高亮的小图标

实现过程

直接上代码

html

<span class="tab-item" :style="{ '--tt-tab-item': `url(${getImgUrl(i, item.icon)})`, '--tt-tab-item-on': `url(${getOnImgUrl(item.icon)})` }"></span>

css

    .tab-item {
      ...// 省略
      background-image: var(--tt-tab-item);
    }
    &:hover {
      background-image: var(--tt-tab-item-on);
    }

js

methods: {
    getOnImgUrl (icon) {
        return require(`./view/${icon}_on.png`);
      },
      getImgUrl (i, icon) {
        return require(`./view/${icon}${this.index === i ? '_on' : ''}.png`);
      },
}

用var函数的原因

为什么不用传统的style行内样式直接设置背景图呢

因为这里还有一个需求——hover也要权重

var函数详解

毫无疑问，直接上文档 developer.mozilla.org/zh-CN/docs/…

var()  CSS 函数可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。

语法：函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数是可选的，用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

备注：  自定义属性的回退值允许使用逗号。例如，var(--foo, red, blue) 将 red, blue 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

<var()> = var(custom-property-name, declaration-value?)

上述的例子：

--tt-tab-item-on做为属性名称，其值通过行内样式style赋予，而行内样式的值又是通过js动态获取

需要注意的是： var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

兼容性

基本上浏览器已经兼容var()写法