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{}內