文章目录
前言
在前端开发中,我们时常需要用到CSS样式来对页面进行装饰,但是往往在开发一个页面的时候,很多属性值常量是重复使用的,特别是当需要实现换肤功能时,往往需要定义很多属性值,如: 颜色、背景、字体大小、字体样式、图片地址、宽高等等。
那么我们是否有能够减少这种累赘庸余的现象发生呢?答案是有的,除了我们平时Vue开发中,用到的Less、scss、Sass等预编译,它们都带有可以自定义变量属性值的功能,这些功能的使用说明都能在其各自的官网中查阅到,就不做过多阐述。但是我们能否不依赖于预编译,实现CSS变量的定义呢? 接下来让我们一起看看…
提示:以下是本篇文章正文内容,下面案例仅供参考
CSS变量(自定义属性值)语法
具体使用说明及需要注意的内容如下:
{
// 定义变量,CSS变量和JS中let定义的变量差不多,有其作用域。
// 定义变量: 用双横线,--来定义变量名, --varName: VarVal
// 使用变量: 使用 var(--varName, 默认值); var函数 可以传两个值,第一个为 所要使用的变量名,第二个为当使用的变量失效时的默认值。
--bgColor: red;
div {
--divBgColor: orange;
--errVar_1: ora nge;
--errVar_2: 'orange';
--errVar_3: ora'nge;
}
// 使用变量
div .divBox {
// 生效
background-color: var(--divBgColor);
// 以下均无法生效,因为在CSS变量(自定义属性值)中,无法处理空格、引号等大部分符号,对字母大小写敏感
color: var(--errVar_1, red);
color: var(--errVar_2, red);
color: var(--errVar_3, red);
}
.noDiv {
// 这里的字体颜色将为空,无法获取没有定义的属性值,作用域超出范围了
color: var(--divBgColor);
// 生效
background-color: var(--bgColor);
}
}
提示: 在定义CSS变量中,需要注意的是,CSS变量无法处理空格、引号等符号,且对字母大小写敏感。所以在定义变量值时,需要注意区分,如: orange 和 Orange就不是同样的值,具体案例如上。
总结
在CSS中,灵活使用自定义变量,能够有效的减少代码庸余,使CSS样式更便于维护。在使用中,需要注意变量值格式,注意大小写、符号 及 空格的处理,避免出现值失效的情况。