如何申明变量

可以像定义任何css属性一样来申明变量,不同的是,变量名必须以--开头。如 --primary-color: #6bc30d

如何使用变量

而要使用一个变量的值,需要使用 var() 函数,并将变量的名称作为参数传入。 如 color: var(--primary-color);

var()函数

var()函数可以代替元素中任何属性中的值的任何部分。

var() 函数接受两个参数,参数一是要替换的自定义属性的名称,参数二是可选的,作为参数一无效时候的回退值(如果第一个参数引用的自定义属性无效,则该函数将使用第二个值)。

var( #custom-property-name# [, #declaration-value# ]? )
# custom-property-name 自定义属性名 #
# declaration-value 声明值(回退值) #

使用变量的意义

  • 无需多次定义,同样的属性可以重复使用
  • 让CSS文件可读易维护(如主题样式,只需修改一个变量即可,而不再是枯燥的查找替换),灵活性更高

注意点

  • 变量名称必须以 -- 开头
  • 变量只能存储一个属性的值,而不能用来存储一个属性,如下例子是错误的:
    /* 这样是错误的 */
    p {
    --primary-color: color;
    var(--primary-color) : #6bc30d
    }
    
  • 变量中无法使用加减等数学方法,如果需要使用计算,则可以使用 calc 函数:
    /* 这样是错误的 */
    p {
    --font-size : 20px * 2;
    font-size: var(--font-size);
    }
    /* 这样是正确的 */
    p {
    --font-size : calc(20px * 2);
    font-size: var(--font-size); //40px
    }
    /* 这样拼接也是无效的 */
    p {
    --font-size: 20;
    font-size: var(--font-size)px; /* 无效 */
    }
    /* 这样是有效的: */
    p {
    --font-size: 20;
    font-size: calc(var(--font-size) * 1px); /* 20px */
    }
    
  • CSS变量是区分大小写的
    /* 这是两个不同的变量 */
    :root {
    --color: blue;
    --COLOR: red;
    }
    

与scss等CSS预处理中变量的区别

  • CSS变量是浏览器原生支持的,不需要经过编译就可以使用
  • CSS变量是DOM的一部分,可以使用JS直接修改

作用域

虽然可以在css的任何地方定义变量,但是css变量也是有作用域的。CSS的变量作用域分为全局作用域和局部作用域。因此在申明一个变量之前,首先要确定这个变量要用在哪里?

全局变量

通过在:root中申明变量,就可以申明一个全局变量,可以在整个文档结构中使用这个变量,因为CSS变量是可继承的。

:root{
  --primay-color: #6bc30d;
}
/* 在任何地方都可以使用`:root`中定义的全局变量 */
p, div , a {
  color : var(--primay-color);
}
#myDiv, .myDiv {
  color : var(--primay-color);
}

局部变量

可以在除:root外的任何地方申明局部变量。但是局部变量只能够在被申明的元素及其子元素中使用。局部变量更多的应用在值覆盖上。

.modal {
  --modal-padding-top: 30px;
}
/* 当前元素及其子元素中使用 */
.modal, 
.modal-content {
  padding-top: var(--modal-padding-top); /* 30px */;
}
/* 在其他元素上无效 */
body {
  padding-top: var(--modal-padding-top); /* 无效设置,使用默认值 */
}

变量的继承

与其他CSS属性一样,CSS中的变量也是可以继承的。

:root{
    --color: red;
}
P {
    --pColor: green;
    color: var(--color); /* red */
}
p > 
span{
    color : var(-pColor); /* green */
}