css變量

簡介

如何讓css像js同樣擁有變量保存屬性值，在開發中快速複用應該已經有了多種方案，相似less，sass等預處理器。那麼如今css已經支持了本身的變量。學習了一波大佬們的知識

變量的聲明

聲明變量的時候，變量名前面要加兩根連詞線 -- 。

:root {
    --color:#000;
    --Color:#001;

}複製代碼

:root僞類能夠看作是一個全局做用域，在裏面聲明的變量，他下面的全部選擇器均可以拿到

body {
    color : var(--color);
    color : var(--Color);
}複製代碼

使用自定義屬性來設置變量名，並使用特定的 var() 來訪問,區分大小寫

var(--color); var(--Color);是不一樣的兩個

它們與color、font-size等正式屬性沒有什麼不一樣，只是沒有默認含義。因此 CSS 變量（CSS variable）又叫作"CSS 自定義屬性"（CSS custom properties）。由於變量與自定義的 CSS 屬性實際上是一回事。

var()函數還可使用第二個參數，表示變量的默認值。若是該變量不存在，就會使用這個默認值。

var(--bg, #111)這種狀況只存在於沒有默認值

其實每一個大括號都是一個做用域，內部優先級高於外部變量優先級

:root {
    --color:#000;

}
body {
    --color:#002;
    color : var(--color);
}
//這裏用個大佬們的例子，下面每一個字的顏色都是按選擇器的優先級現實的
<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>藍色</p>
<div>綠色</div>
<div id="alert">紅色</div>複製代碼

須要注意的是 CSS 變量並不支持 !important 聲明。

var()函數還能夠用在變量的聲明。

:root {
  --color: red;
  --bg: var(--color);
}複製代碼

注意，變量值只能用做屬性值，不能用做屬性名。

:root {
  --color: color;
  var(--color): red;
}複製代碼

這樣是不合法的

變量值的類型

• 若是變量值是一個字符串，能夠與其餘字符串拼接。

  --one: '1px';
  --border: var(--one)' solid red';複製代碼

• 若是變量值是數值，不能與數值單位直接連用。

  .foo {
    --top: 20;
    /* 無效，至關於沒有設置 */
    margin-top: var(--top)px;
  }複製代碼

• 若是變量值帶有單位，就不能寫成字符串。

  .foo {
    --top: "20px";
    /* 無效，至關於沒有設置 */
    margin-top: var(--top);
  }複製代碼

• 數值與單位直接寫在一塊兒，可使用calc()函數，將它們鏈接，不過要當心兼容問題。

  .foo {
    --top: 20;
    margin-top: calc(var(--top) * 1px);
  }複製代碼

在傳統的CSS概念裏，屬性的有效性(validity)對於自定義屬性來說，並不適用。當自定義屬性被解析，瀏覽器不知道哪裏爲調用到它們，因此幾乎全部的值都是有效的。
不幸的是，這些有效值能經過var()函數操做符來調用，即便在當前上文沒有意義。因此屬性和自定義的值會致使無效的CSS聲明。

1. 不能使用CSS自定義屬性做爲CSS屬性名稱：var(--side): 10px;
2. 不能做爲媒體查詢值使用：@media screen and (min-width: var(--min-width) {}
3. 圖片地址，如url(var(--image-url)) ，不會生效

響應式佈局

• 通常而言，使用媒體查詢的時候，咱們須要將要響應式改變的屬性所有從新羅列一遍。利用css變量的特色，能夠在響應式佈局的media命令裏面聲明變量，使得不一樣的屏幕寬度有不一樣的變量值。在這裏它的做用將優於 LESS 和 SASS

:root {
    --mainWidth:1000px;
    --leftMargin:100px;
}

.main {
  width: var(--mainWidth);
  margin-left: var(--leftMargin);
}

@media screen and (min-width:1480px) {
    :root {
        --mainWidth:800px;
        --leftMargin:50px;
    }
}複製代碼

兼容性處理

• 別處理了放棄低版本瀏覽器吧，過。
• 檢查是否兼容:說實話我是不想檢測兼容的本身試呢反正都是最新的東西，等團隊決定要用了兼容問題也不會太嚴重

a {
  color: #7F583F;
  color: var(--primary);
}
/* 用屬性值得無效聲明 */

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}
/* 也可使用@support命令進行檢測。 */

const isSupported =
    window.CSS &&
    window.CSS.supports &&
    window.CSS.supports('--a', 0);

if (isSupported) {
    /* supported */
} else {
    /* not supported */
}
/* JavaScript 檢測瀏覽器是否支持 CSS 變量。 */複製代碼

JavaScript 操做

• 這也是css變量一大實用之處

• 讀寫屬性

:root{
  --testMargin:75px;
}

var root = getComputedStyle(document.documentElement);
//  讀取
var cssVariable = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable); // '75px'
// 寫入
root.setProperty('--testMargin', '100px');
// 刪除變量
root.removeProperty('--testMargin');複製代碼

這意味着，JavaScript 能夠將任意值存入樣式表。

1. 網頁換膚點擊按鈕改變CSS變量值

const btn = document.getElementById("button");
const docStyle = document.documentElement.style;
btn.onClick = function(){
    docStyle.style.setProperty('--tplColor', 'yellow');
}複製代碼

1. 監聽事件，事件信息存入 CSS 變量。

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
    docStyle.setProperty('--mouse-x', e.clientX);
    docStyle.setProperty('--mouse-y', e.clientY);
});複製代碼

解決的問題實用性

1. 維護一個配色方案，意味着一些顏色在CSS文件中屢次出現，並被重複使用。當你修改配色方案時，不管是調整某個顏色或徹底修改整個配色，都會成爲一個複雜的問題。
2. 這些變量的第二個優點就是名稱自己就包含了語義的信息。CSS文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是一樣的顏色出如今不一樣的文件中的時候。
3. 在開發過程當中減小工具的使用，減小了學習成本，能力大大提高,不須要額外的編譯。
4. CSS 變量的動態性，能在頁面運行時更改，而傳統預處理器變量編譯後沒法更改
5. CSS 變量可以繼承，可以組合使用，具備做用域
6. 配合 Javascript 使用，能夠方便的從 JS 中讀/寫,直接連通JS和CSS

其實CSS也是一個很是牛逼的東西善用他的各類屬性頁面也會變得很是有趣，而他也在慢慢向可編程的方向發展。