在原生CSS中使用变量

如何申明变量

可以像定义任何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 */
}