CSS Variable Study

時間 2019-11-08

標籤 css variable study 欄目 CSS 简体版

原文原文鏈接

CSS變量能幫助咱們幹什麼

在一些命令式編程語言中，像Java、C++亦或是JavaScript，經過變量咱們可以跟蹤某些狀態。變量是一種符號，關聯着一個特定的值，變量的值能隨着時間的推移而改變。
在像CSS這種聲明式語言中，隨着時間而改變的值並不存在，也就沒有所謂變量的概念了。
CSS 引入了一種層級變量的概念，從而可以從容應對可維護性的挑戰。這就會使得在整個 CSS tree 中均可以象徵性的引用一個變量

1、什麼是CSS變量

CSS 變量當前有兩種形式：css

變量，就是擁有合法標識符和合法的值。能夠被使用在任意的地方。可使用var()函數使用變量。例如：var(--example-variable)會返回--example-variable所對應的值
自定義屬性。這些屬性使用--where的特殊格式做爲名字。例如--example-variable: 20px;即便一個css聲明語句。意思是將20px賦值給--example-varibale變量html

2、變量的聲明

變量的命名

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

注意: 變量名大小寫敏感，--header-color和--Header-Color是兩個不一樣變量編程

聲明方式

CSS變量聲明的方式很是簡單，以下，聲明瞭一個名叫color的CSS變量。瀏覽器

在css文件中寫
寫在html標籤的inline-style裏
用JS給某個元素聲明，方法.style.setProperty

body{
  --color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')

變量值的類型

若是變量值是一個字符串，能夠與其餘字符串拼接編程語言

--bar: 'hello';
--foo: var(--bar)' world';


body:after {
  content: '--screen-category : 'var(--screen-category);
}

若是變量值是數值，不能與數值單位直接連用,必須使用calc()函數，將它們鏈接ide

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

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

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

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

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);

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

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

上面代碼中，變量--side用做屬性名，這是無效的htm

3、CSS變量的繼承&做用域

自定義屬性一樣支持繼承。一個元素上沒有定義自定義屬性，該自定義屬性的值會繼承其父元素blog

class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

定義下面的CSS：

.two { --test: 10px; }
.three { --test: 2em; }

在這個例子中，var(--test)的結果是：

class="two" 對應的節點: 10px
class="three" 對應的節點: element: 2em
class="four" 對應的節點: 10px (inherited from its parent)
class="one" 對應的節點: 無效值, 即此屬性值爲未被自定義css變量覆蓋的默認值

最頂層的做用域就是:root

4、響應式

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

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

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

5、與預處理器的不一樣

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

$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文件一塊兒使用

6、JS操做變量

CSS 變量能夠和 JS 互相交互

:root{
  --testMargin:70px;
}
//  讀取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
 
// 寫入
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); // '70px'

7、兼容性

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

https://caniuse.com/#search=c...