有趣且重要的css知识合集（6）动态控制css伪元素【var()】

在vue里，js和css的属性可以随意控制，比如:class和:style，但是我们想要动态控制伪元素的属性该怎么做呢？

比如下图，右下角小圆圈就是通过伪元素定义上去的，那我们想要自由实现伪元素的显示和隐藏该怎么做呢？那就可以通过 var()  var()函数可以代替元素中任何属性中的值的任何部分，想要具体了解的可以看官方文档噢~下面是链接

var()

0、相关概念

var() 是css自定义变量，使用为var(--*)， *号为变量，为什么必须加双短横线呢？，因为$*被 Sass 用掉了，@*被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了，有两个参数，第二参数为默认值，当*变量不存在时，则直接使用默认值

1、示例图

伪元素显示：

 伪元素隐藏：

 

 2、使用方法

通过 --display 这个变量来控制

.resize{
  &::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid rgb(2, 167, 240);
    background-color: #fff;
    right: -4px;
    bottom: -4px;
    cursor: nwse-resize;
    display: var(--display);
  }
}

<template>
    <div class="resize" :style="rectStyle"></div>
</template>
<script>
    export default{
        data() {
            return {
                show: false
            }
        }
        computed: {
            rectStyle: {
                '--display': this.show ? 'block' : 'none'
            }
        }
    }
</script>

3、拓展知识

1、css中使用自定义变量已经很多地方啦~比如你可以到你项目里看到 :root的使用，在:root里声明的为全局作用域，下属所有选择器都可以继承此属性，当然你定义在一个class里就是局部作用域啦

2、如果变量值是一个字符串，可以与其他字符串拼接

--hello: 'hello';   
--world: var(--hello)' world';

3、如果变量值是数值，不能与数值单位直接连用，要使用的话就用calc拼接

.resize{ 
  --distance: 10; 
  margin-left: calc(var(--distance) * 1px); 
}

4、如果变量值带有单位，就不能写成字符串，直接写出来

.resize{
  --distance: 10px;
  margin-left: var(--distance);
}

5、关于支持css变量和不支持css变量的浏览器兼容

.resize{
  --distance: 10px;
  margin-left: var(--distance);
  margin-left：10px;
}

// 可以使用@support命令进行检测
@supports ( (--resize: 10px)) {
  /* 支持*/
}
@supports ( not (--resize: 10px)) {
  /* 不支持 */
}