我们知道变量是可以在整个程序中使用的值的容器或占位符。并且,如果需要更改值,则只需更改变量的值,而不必更改所出现有的变量位置的值。
什么是CSS变量
CSS 变量当前有两种形式:
- 变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值
- 自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。
自定义属性(有时候也被称作 CSS 变量或者级联变量)是由 CSS 作者定义,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;
),由 var() 函数来获取值(比如: color: var(--main-color);
)
复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。另一个好处是语义化的标识。比如,--main-text-color
会比 #00ff00
更易理解,尤其是这个颜色值在其他上下文中也被使用到。
自定义属性受级联的约束,并从其父级继承其值。CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来。
CSS变量的好处
以下是您应该关注此功能的两个原因:
- 在整个样式表中更改相同的值非常容易。
- 它使创建主题变得容易,可以在样式表中始终保留两到三种颜色,而没有任何变化或猜测。
element1 {
--pinkColor: #FFC0CB;
}
.elementUnderElement1 {
color: var(--pinkColor);
border: 1px solid var(--pinkColor);
}
如上所述,CSS 变量可以称为您定义的自定义属性。前面的双连字符(-)pinkColor
表示该属性是自定义的。这也是产生变量的原因。
在 elementUnderElement1
类中,可以通过调用 var()
函数并将自定义属性作为参数来使用变量。
关于CSS变量的几点知识
- 它们区分大小写。
- 他们可以拥有任何的值。当使用
var()
函数调用它们时,将使用它们的值。请记住,变量就像占位符一样。 - 如果为属性调用的值与语法不符(例如color:20px;),则使用继承的颜色或初始颜色。这是CSS的正常行为。
- 变量是自定义属性,属性可以在任何地方声明,因此您可以在任何元素中声明变量。
- 您可以在任意位置声明任意数量的变量。
变量作用域
在编程语言中,您必须已经听说过作用域这一术语,它定义了变量的环境(即程序的哪个区域可以访问该变量)。CSS也是如此。为变量的 element1
作用域定义变量,以便只有 element1
element 及其子元素(例如 elementUnderElement1
class)可以访问该变量。
如果要声明全局变量怎么办?
:root
🔥
根据MDN,
在
:root
CSS 伪类代表文档树的根元素相匹配。在HTML中,:root
代表<html>
元素,并且与选择器相同html
,不同之处在于它的特异性更高。
此处声明的任何变量都可以在样式表中的任何元素使用。例:
:root {
--largeFontSize: 50px;
--smallFontSize: 20px;
--color: #fcfcfc;
}
h1 {
font-size: var(--largeFontSize);
}
@media only screen and (max-width: 400px){
h1 {
font-size: var(--smallFontSize);
}
}
通过普通的 JS 获取 CSS 的自定义属性值
例如上面 :root 中的-colorl 变量值:
let root = document.querySelector(':root');
let rootStyles = getComputedStyle(root);
let color = rootStyles.getPropertyValue('--color');
console.log(color); //"#fcfcfc"
通过 JS 设置 CSS 自定义属性值
接着上面的代码栗子:我们改变 --color 变量的值为 green
root.style.setProperty('--color','green');
有效性(validity)和值
在传统的CSS概念里,属性的有效性(validity)对于自定义属性来讲,并不适用。当自定义属性被解析,浏览器不知道哪里为调用到它们,所以几乎所有的值都是有效的。
不幸的是,这些有效值能通过var()函数操作符来调用,即使在当前上文没有意义。属性和自定义的值会导致无效的CSS声明,所以有了计算时有效(valid at computed time)的概念。
解决的问题
在构建大型站点时,作者通常会面对可维护性的挑战。在这些网页中, 所使用的 CSS 的数量是非常庞大的,并且在许多场合大量的信息会重复使用。例如,在网页中维护一个配色方案,意味着一些颜色在CSS文件中多次出现,并被重复使用。当你修改配色方案时,不论是调整某个颜色或完全修改整个配色,都会成为一个复杂的问题,不容出错,而单纯查找替换是远远不够的。
如果使用了 CSS 框架,这种情况会变得尤其糟糕,此时如果要修改颜色,则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器是非常有帮助的,但是这种通过添加额外步骤的方式,可能会增加系统的复杂性。CSS变量为我们带来一些预处理器的便利,并且不需要额外的编译。
这些变量的第二个优势就是名称本身就包含了语义的信息。CSS 文件变得易读和理解。main-text-color比文档中的#00ff00更容易理解,特别是同样的颜色出现在不同的文件中的时候。
应用场景举栗:
1.作为 web 主题颜色更换
更换主题我们可以整体更换字体颜色,对应不同板块的背景颜色等
:root{
--main-bg-color:red;
--dark-bg-color:#ccc;
--light-bg-color:#fff;
}
body{
background-color:var(--main-color);
}
2.再作适配时,不同屏幕大小
.content{
grid-template-columns:200px 200px;
}
/*
* 改进为属性代替
*/
/*
* variable declare
*/
:root{
--yellow:yellow;
--red:#c00;
}
.content{
--columns:200px 200px;
}
/*
* styles
*/
h1,p{
color:var(--red);
}
.content{
display:grid;
grid-template-columns:var(--columns);
grid-auto-rows:140px;
grid-gap:20px;
justify-content:center;
}
@media all and (max-width:450px){
.content{
--columns:200px;
}
:root{
--red:red;
}
}
3.多个位置多次使用同一个属性值
例如我们颜色是 #c0ffc0 ,每次记住他或者复制粘贴都很麻烦,我们可以给他定义一个别名,然后轻松引用。还比如margin,padding,font-size,border 等多次出现的都可以使用 css 自定义属性值
总结
CSS使网页中颜色,大小和其他属性值的一致性变得容易。
它还允许轻松更改值。想象一下在一个页面中使用20个属性的颜色值。变量可以在顶层元素中声明,变量函数可以在20个位置调用。如果需要更改该值,则不必检查20次外观,只关心声明变量的顶级元素。
但是,在命名变量时应该多加考虑。您可以使用mainColor,而不是使用pinkColor作为自定义属性。如果出于任何原因,您可以将颜色变量的值更改为与粉色完全不同的颜色,这一点很重要。