CSS中变量函数和自定义属性-CFANZ编程社区

CSS中变量函数和自定义属性

变量

css中变量语法由变量的声明和变量的使用组成的。变量声明是自定义属性和对应的值组成。变量的使用可以通过var()调用自定义属性去实现。选择器和动画的命名不能使用数字开头除非转义之后去使用，但是自定义属性值可以使用数字。不仅如此还支持短横线和空格以及中文命名。但是不支持的有$和^和%以及(、)等这些特殊字符的命名。如果想用特殊字符，我们可以使用反斜杠转义后再去使用。

.test {
    --: #ccc;
    --2: #000;
    -\%: #fff;
}

var()接收的第一个时自定义属性名，第二个是声明值。我们需要注意的是如果自定义属性值和var()同时存在的时候，自定义属性值只有当前面失效的时候才会渲染，如果var()函数的第一个参数值有效，那么自定义属性值就不会渲染。如果当背景色变量的值不是色值是数值时，那么var使用这个变量是，会使用初始值transparent进行替代。当使用var(--x)px，在css中相当于在x加个空格再加上px。如果我们想要将数值类型的自定义属性值成为长度值，我们可以使用calc()函数。使用方式就是将calc包裹var就行。自定义属性的作用域不是全局的，如果想要所有页面和标签都可以使用自定义属性，我们可以在自定义属性中使用:root伪类。这个属性类似于继承，主要用于元素自身或者后代元素上。

.test {
    --x: 33px;
    font-size: var(--x);
}

var()还可以结合线性渐变的linear-gradient属性一起去使用。除了to，top可以使用自定义属性，还有单个色值和起止色值以及渐变函数的参数值或者渐变函数的表达式都可以去使用。自定义属性还可以作为信使传递attr()函数，还能结合自定义的函数使用。我们需要注意的是这个自定义属性不可以在媒体查询中使用，但是env()函数可以使用。除此之外，自定义属性也不能直接在style对象上设置，如果想要使用，需要结合setProperty()方法进行设置。当我们使用before和after伪元素时，在content中使用var()是没有任何效果的。

.warp {
    --op: attr(bgcolor color);
    background-color: var(--op);
}

0 条评论