var 變量

小知識點

變量聲明：--color
變量命名：變量名可以是數(shù)字、字母、下劃線、中橫線、中文
變量賦值：--color: red; --color1: #def;
變量獲取：color: var(--color);
默認值：var(變量名, 可選的默認值1, 可選的默認值2...)，如果引用的變量沒有定義，則按默認值的順序依次取默認值進行使用。默認值比較適合calc計算時，萬一計算結(jié)果非法，可以用默認值。
變量取值：顏色值、字符串、多個值的組合、函數(shù)等。注意，帶單位的值和顏色值不用加引號包成字符串，示例：--borderC: green;--fontSize: 12px;變量值不合法：使用默認值。比如var(--color, red);中，--color 值如果非法，不會使用 red，而是使用樣式表中繼承的/默認的樣式值來代替
權(quán)重層級：遵循 css 選擇器的權(quán)重等級，比如：內(nèi)聯(lián)樣式 > id > class > 標簽 > *

作用域：

如下幾條規(guī)則

放在 :root 根選擇器的變量，所有選擇器里都能用；
放在私有選擇器的只能自己及下級使用。類似函數(shù)作用域的規(guī)律。
結(jié)合 sass、less 等預處理器的選擇器嵌套功能使用時，父作用域的變量子作用域也可以用。
結(jié)合@media實現(xiàn)響應式變化不同作用域的變量值

<style>
  :root {
    /* 全局作用域的變量 */
    --color: blue;
    --borderC: green;
    --變量名: '變量名可以是數(shù)字、字母、下?lián)Q線、中橫線、中文';
  }

  div {
    --color: pink;
  }

  div.father {
    /* 私有作用域 */
    --color: red;
    color: var(--color);
    position: relative;
    transition: color 0.3s ease-in-out;
  }

  div.father::after {
    content: var(--變量名);
    color: var(--color);
    border: 1px solid var(--borderC);
    transition: color 0.3s ease-in-out;
  }

  div.father .child {
    --color: rgb(255, 60, 190);
    color: var(--color);
  }

  /* 結(jié)合`@media`實現(xiàn)響應式變化不同作用域的變量值 */
  @media screen and (min-width: 768px) {
    :root {
      --color: orange;
    }

    div.father {
      --color: black;
    }
  }

  /* 兼容性判斷 - css */
  @supports ((--color: 0)) {
    div.father::before {
      content: '當前瀏覽器支持css variables';
      color: red;
      border: 3px lodash var(--borderC);
    }
  }

  @supports (not (--color: 0)) {
    div.father::before {
      content: '不支持';
      color: var(--color);
      border: 3px lodash var(--borderC);
    }
  }
</style>
<div class="father" id="father">
  用變量修改顏色值
  <span class="child"> 子作用域 </span>
</div>
<button id="getBtn">獲取css var變量值</button>
<button id="setBtn">設(shè)置css var變量值</button>
<button id="deleteBtn">刪除css var變量值</button>

兼容性

各瀏覽器兼容情況：https://caniuse.com/?search=css%20var

兼容性判斷

/* 兼容性判斷 - css */
@supports ((--color: 0)) {
  div.father::before {
    content: '當前瀏覽器支持css variables';
  }
}

@supports (not (--color: 0)) {
  div.father::before {
    content: '不支持';
  }
}

(() => {
  console.log('當前頁面是否支持Css變量', window.CSS.supports('--color', 0))
})()

JS 操作 CSS 變量

var root = getComputedStyle(document.documentElement);
var divFather = getComputedStyle(father);
console.log(root, divFather)
//  讀取 變量值
getBtn.onclick = () => {
  var var1 = root.getPropertyValue('--color').trim();
  console.log(var1);
}
// 新增 / 修改變量值
setBtn.onclick = () => {
  father.style.setProperty('--color', '#111def');
  var var2 = divFather.getPropertyValue('--color').trim();
  console.log(var2);
}
// 刪除 變量值
deleteBtn.onclick = () => {
  father.style.removeProperty('--color');
  var var3 = divFather.getPropertyValue('--color').trim();
  console.log(var3);
}