css變量

:root{
    --color: red;
}

//body {
//    --color: red;
//}

h1 {
    color: var(--color); /** 這里獲取到的是全局聲明的變量饵沧，值為red **/
}

div {
    --color: blue;
    color: var(--color); /** 這里獲取到的是局部聲明的變量怖竭，值為blue **/
}

參考：https://segmentfault.com/a/1190000023479851
參考：http://www.ruanyifeng.com/blog/2017/05/css-variables.html

CSS選擇器不能是數(shù)字開頭征绎，JS中的變量是不能直接數(shù)值的，但是欢顷，在CSS變量中，這些限制通通沒有。 但不能包含$，[悼沿，^等舔，(骚灸，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合慌植，但是可以是中文甚牲，日文或者韓文。

1. 聲明：大小寫敏感, --variable-name: variable-value;

:root{
    --color: red;
}

2. 使用：使用var(變量名)來使用一個(gè)變量

#div {
    color: var(color)
}

3. 變量組合使用
   使用變量的時(shí)候蝶柿，通常不會(huì)單獨(dú)使用丈钙，可以組合使用
   當(dāng)變量的值是字符串時(shí)，可以直接拼接交汤，如下

:root{
  --screen-category: 'category'  //變量值是字符串
}
body:after {
  content: '--screen-category: 'var(--screen-category);  // 直接拼接
}

當(dāng)變量的值是數(shù)值時(shí)雏赦，必須使用calc()函數(shù)計(jì)算，就算還是簡(jiǎn)單的單位拼接

.foo {
  --gap: 20;
  /* 無效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

4. 變量未定義和錯(cuò)誤定義
   如果我們使用的變量沒有定義芙扎，則使用后面的值作為元素的屬性值, 如下所示
   body里面訪問不到.box定義的--1星岗，因此使用#cd0000

.box {
  --1: #369; 
}
body {
  background-color: var(--1, #cd0000);
}

使用變量時(shí)，若變量已定義戒洼，但是變量的值不正確俏橘，則使用缺省值,如:

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}

結(jié)果body的顏色是transparent，因?yàn)閎ackground-color的缺省值就是transparent

二圈浇、繼承和作用域

1. 作用域
   使用:root{}來定義全局css變量
   想讓變量在局部可用寥掐，就定義在某個(gè)特定的選擇器下
   還是下面這段代碼

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box這個(gè)作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

2. 繼承

<div class="wrapper">
   <div class="content1"></div>
   <div class="content2"></div>
</div>

.wrapper {
   --color: red;
}

.content1 {
   --color: yellow;
}

content1的--color為yellow
content2的--color沒有定義靴寂，繼承了wrapper的--color為red
--color: yellow只在content1的作用域內(nèi)有效

三、js操作css變量

:root {
   --color: red;
}

//讀取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue('--color').trim();
console.log(color); // 'red'

//改變
document.documentElement.style.setProperty('--color', 'yellow');
var color = root.getPropertyValue('--color').trim();
console.log(color);  // 'yellow'

//刪除
document.documentElement.style.removeProperty('--color');
var color = root.getPropertyValue('--color').trim();
console.log(color); // 'red'

四召耘、與預(yù)處理器(sass,less)比較

1. css變量：
   動(dòng)態(tài)性百炬，可以在運(yùn)行時(shí)更改
   可以方便地從js讀寫
   可繼承，可組合污它，有作用域

2. 預(yù)處理器：
   預(yù)處理器的變量不是動(dòng)態(tài)的收壕，在運(yùn)行時(shí)不可更改
   預(yù)處理器的變量沒有作用域的說法
   不能與js交互

如果想使用但又想兼容所有瀏覽器，就是用下面的方法檢測(cè)瀏覽器是否支持CSS自定義屬性的方法

/*css*/
@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}

// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
    alert('CSS properties are supported');
} else {
    alert('CSS properties are NOT supported');
}

六轨蛤、常用場(chǎng)景
為風(fēng)格統(tǒng)一而使用顏色變量
一致的組件屬性（布局蜜宪，定位等）
避免代碼冗余(響應(yīng)式布局，制動(dòng)動(dòng)畫)

參考：https://segmentfault.com/a/1190000015948538