CSS中关于变量的基本教程

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例

CSS Code复制内容到剪贴板

:root {   
  –base-font-size: 16px;   
  –link-color: #6495ed;   
}   
p {   
  font-size: var( –base-font-size );   
}   
a {   
  font-size: var( –base-font-size );   
  color: var( –link-color );   
}  

基础

当使用CSS变量时，你应该了解的三个主要组成：

    自定义属性
    var()函数
    :root伪类

自定义属性

你已经知道了一些CSS的标准属性，如color,margin,width和font-size。
下面的示例使用了CSS的color属性：

CSS Code复制内容到剪贴板

body {   
  color: #000000; /* The "color" CSS property */  
}  

自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。
为了自定义一个属性名，我们需要用–作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：

CSS Code复制内容到剪贴板

:root {   
  –text-color: #000000; /* A custom property named "text-color" */  
}  

var()函数

为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。
如果想要在p、h1和h2中的样式中使用–text-color，可以这样使用var()函数：

CSS Code复制内容到剪贴板

:root {   
  –text-color: #000000;   
}   
p {   
  color: var( –text-color );   
  font-size: 16px;   
}   
h1 {   
  color: var( –text-color );   
  font-size: 42px;   
}   
h2 {   
  color: var( –text-color );   
  font-size: 36px;   
}  

其等价于：

CSS Code复制内容到剪贴板

p {   
  color: #000000;   
  font-size: 16px;   
}   
h1 {   
  color: #000000;   
  font-size: 42px;