CSS Variables

CSS原生變量(CSS自定義屬性)

示例地址：https://github.com/ccyinghua/Css-Variables

1、css原生變量的基礎用法

變量聲明使用兩根連詞線"--"表示變量，"$color"是屬於Sass的語法，"@color"是屬於Less的語法，爲避免衝突css原生變量使用"--"

// 聲明變量
--color:#000;

// 讀取變量
var(--color)

注：
一、變量聲明不能包含$，[，^，(，%等字符，普通字符侷限在只要是「數字[0-9]」「字母[a-zA-Z]」「下劃線_」和「短橫線-」這些組合，可是能夠是中文，日文或者韓文 
二、變量的值能夠是顏色、字符串、多個值的組合等

示例：

<h3>css variables基礎使用</h3>
<div class="btn_box">
    <button type="button" class="login_btn">登陸</button>
</div>

/* css variables基礎使用 */
:root{
    --content1:"abc";
    --content2:"efg";
    --width:calc(100px + 200px);
    --btn-bg:#279cff;
    --字體:18px;
}
.btn_box:before{
    content:var(--content1)' with add';
    display:block;
    line-height: 50px;
}
.btn_box:after{
    content:var(--content1)','var(--content2);
    display:block;
    line-height: 50px;
}
.login_btn{
    width:var(--width);
    height:50px;
    border-radius:30px;
    border:0;
    background: var(--btn-bg);
    box-shadow: 0 5px 5px rgba(39,156,255,.42);
    text-align: center;
    font-size:var(--字體);
    line-height: 50px;
    color:#fff;
    cursor:pointer;
    outline:none;
}

 

2、做用域

一、變量是遵循CSS語法的優先級高低的 Id > class > 標籤 > *
二、注意並沒有!important這種用法；
三、若是變量所在的選擇器和使用變量的元素沒有交集,是沒有效果的。

<div>藍色</div>
<div class="divbox">綠色</div>
<div class="divbox" id="alert">紅色</div>

:root { --color: blue; }
.divbox { --color: green; }
#alert { --color: red; }
div{
    color: var(--color);
    width:300px;
    line-height: 50px;
    text-align: center;
}

3、響應式

div {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}

4、注意事項

一、屬性名(例：width/height/margin....等)不能夠走變量

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

二、var()的完整的寫法是"var(<自定義屬性名> [, <默認值 ]?)",在變量的名字後面能夠有一個默認值，若是引用的變量沒有定義（注意，僅限於沒有定義），則使用後面的值做爲元素的屬性值

body {
    background:var(--bg,skyblue);
}

三、若是變量值是不合法的，例以下面設置背景色background只能是色值而不能是像素，則使用背景色屬性的默認值代替。

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

等同於

body {
    --bg: 20px;
    background-color: #369;
    background-color: transparent;
}

四、CSS變量設置數值

(1)

h3 {
  --size: 30;   
  font-size: var(--size)px;
}

結果h3元素的字體大小就是自己的默認大小 

(2)

h3 {
  --size: 30px;   
  font-size: var(--size);
}

等於
h3 {
    font-size:30px;
}

(3)使用CSS3 calc()計算：

h3 {
  --size: 30;   
  font-size: calc(var(--size) * 1px);
}
等於
h3 {
    font-size:30px;
}

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

/* 無效 */
.divbox {
    --size: '30px';
    font-size: var(--size);
}

/* 有效 */
.divbox {
    --size: 30px;
    font-size: var(--size);
}

六、進行calc()運算時，最好能提供默認值: calc(var(--base-line-height, 0) * 1rem)

七、不能做爲媒體查詢值使用：

@media screen and (min-width: var(--desktop-breakpoint) {})

八、圖片地址，如url(var(--image-url)) ，不會生效

5、兼容性處理

檢測瀏覽器是否支持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');
}

6、JS操做變量

CSS 變量能夠和 JS 互相交互

:root{
  --testMargin:75px;
}

//  讀取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '75px'
 
// 寫入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2);  // '100px'

// 刪除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '75px'

javascript能夠把任意值存入css變量，能夠讀取變量的值，實現javascript與css的通訊。

7、CSS variables與預處理器的不一樣

一、預處理器變量不是實時的

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}

編譯結果

.mediabox {
  background: #7F583F; 
}

二、預處理器不能限定做用域

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

編譯爲

ul {
  color: blue; 
}

三、預處理器變量不可互操做

原生的CSS自定義屬性能夠與任何CSS預處理器或純CSS文件一塊兒使用。

四、總結

• 相較於傳統的 LESS 、SASS 等預處理器變量，CSS 變量的優勢在於:
• CSS 變量的動態性，能在頁面運行時更改，而傳統預處理器變量編譯後沒法更改
• CSS 變量可以繼承，可以組合使用，具備做用域
• 配合 Javascript 使用，能夠方便的從 JS 中讀/寫

8、CSS原生變量的兼容性

https://caniuse.com/#search=css%20var