css——使用全局变量设置主题颜色

搬运自：https://www.cnblogs.com/WQLong/p/7792174.html

 

1. 变量的声明

CSS变量声明是字母前加两个横线（--）

例：

body{

　　--Colors:#dfdfdf;

　　--fS16px:16px;

}

body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了，@被Less占用了，所以是为了区分它们。

变量的声明对大小写敏感。如：colors和Colors表示两个不同的变量。

 

2. var()函数

var函数用来读取变量

例：

a{
  color:var(--Colors);     
}

(1). var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

例：

color: var(--Colors, #e5e5e5);

(2). 第二个参数不处理内部的逗号或空格，都视作参数的一部分。

例：

var(--fontF, "Roboto", "Helvetica");
var(--Margins, 15px 20px 25px);

(3). var()函数还可以用在变量声明中

例：

div{
      --bgcolors:red;
      --fColor:var(--bgcolors)        
}

注意：变量只能作为属性值，不能作为属性名

 

3.变量值的类型

(1). 字符串，可以与其他字符串拼接

--far:'hello';
--foo:var(--far)',world';

(2). 数值，不可以拼接

--far:20;
--foo:var(--far)'px'; //无效

但可以通过calc()函数，将他们拼接起来

--far:20;
--foo:calc(var(--far)*1px);

(3). 变量值带单位，则不能写成字符串形式

--far:'20px';
margin-top:var(--far); //无效

--far:20px;
margin-top:var(--far); //有效

 

4.作用域

<style>
  :root { --color: blue; }  //css 伪类，匹配文档的根元素 
  div { --color: green; }
  #alert { --color: red; }  //局部变量
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。

这就是说，变量的作用域就是它所在的选择器的有效范围。

所以一些通用的变量值，最好声明在:root{}内