CSS Variables學習筆記

mudiyouyou 發布于2019-08-29 15:11 / 2892人閱讀

摘要：注本文首發于個人博客學習筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學習筆記。使用自定義屬性來設置變量名，并使用特定的來訪問。二學習筆記聲明調用聲明方式變量聲明的方式非常簡單，如下，聲明了一個名叫的變量。

注：本文首發于個人博客《CSS Variables學習筆記》。

最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學習筆記。

一、什么是CSS Variables

來，直接看MDN上的描述：

CSS 變量是由CSS作者定義的實體，其中包含要在整個文檔中重復使用的特定值。使用自定義屬性來設置變量名，并使用特定的 var() 來訪問。

color: var(--main-color);

二、學習筆記 1. 聲明 & 調用 i. 聲明方式

CSS變量聲明的方式非常簡單，如下，聲明了一個名叫color的CSS變量。

在css文件中寫

寫在html標簽的inline-style里

用JS給某個元素聲明，方法.style.setProperty

body{
  --color: red;
}

document.getElementsByTagName("body")[0].style.setProperty("--color", "red")

ii. 調用方式

通過var()函數調用，如：

.block{
  color: var(--color);
}

iii. 變量的命名

說完聲明和調用，還有個小問題。那么，CSS變量的命名，有什么限制么？下面我們來測試一下。

.foo-test{
  --foo:;
  --ffoo:;
  --Foo: red;
  --FOo: blue;
  --FOO: green;
  /* 以下省略測試className的代碼 */
}

從以上測試代碼可以看出：

CSS變量的命名是大小寫敏感的

不賦值或者賦值空格，都是無效的

2. 作用域 & 繼承

CSS變量也有作用域一說，而最頂層的作用域就是:root，下面的所有的元素都可以共享相關CSS變量。

:root{
  --color: green;
}

剛才我們在body上，定義了--color，在body下的子元素，都會默認繼承這個屬性，隨意使用。當然也可以重載，把--color定義為別的值。


  inherit color
  overwrite color - hello world

body{
  --color: green;
}
.block{
  color: var(--color);
}
.css-var-text{
  --color: red;
  color: var(--color);
}

.block，作為body的子元素，繼承了--color屬性，所以邊框出來就是green。

而.css-var-text在自己的作用域中，重寫了--color，出來的字體顏色是overwrite后的blue。

3. 瀏覽器支持 i. 瀏覽器支持現狀

來看看caniuse上CSS Variables (Custom Properties)的支持度：

PC的話，IE 11和Edge的支持度都很差，而Chrome（2016.3）、Firefox（2017.11）和Safari(2017.3)的一些新版本都是支持的，相信很快就能普及。

Mobile的話，Safari在2016年的版本已經支持CSS變量了，但Opera、Chrome、UC等的支持還不太好。

ii. fallbacks

瀏覽器的支持度不太好，我們又想玩新東西的話，就需要考慮如果瀏覽器不支持CSS變量，怎么優雅降級。（嗷，兩套代碼是有點……）

/* 當瀏覽器不支持CSS變量 */
.browser-support{
  background: red;  
}

/* 當瀏覽器支持CSS變量 */
@supports (--css: variables) {
  .browser-support{
    background: var(--color);
  }
}

三、代碼習作 1. codepen

在學習CSS Variables的時候，有邊寫一些教程的demo，除了以上，還包括一些實際場景的應用，如像box-shadow復合屬性的拆解，以及JS操作CSS變量等。

CSS Varibles Study Notes on Codepen.io.

2. flexbox屬性的DEMO

之前在團隊也做過一下下flexbox的分享，大家也知道，flex屬性和對應的值特別多，當時就很想做個可以隨時變屬性值看效果的playground。

但想了下傳統的實現方式，貌似沒有優雅的方法。

CSS+JS實現：寫一批classname，option切換時，通過JS修改classname改變樣式；

純JS實現，根據option的value用JS改寫元素的inline style（一直修改dom）

哎喲，換CSS Variables之后，一切就不一樣了，可繼承、可復用、易維護，目前實現比較簡單，可能跟以上的傳統方式差別不太大，不過后續要修改或者做更多優化，我相信優勢就會凸顯出來了。

demo傳送門：wuyuying.com/flexbox-css-var

github傳送門

小結

哈哈，沒想到小結寫什么，如果大家有好玩的CSS Variables的應用，歡迎分享給我：）

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113156.html

Day03 - CSS 變量

摘要：變量作者簡介是推出的一個天挑戰。這是一個的新特性，和目前都還不支持。命名寫法是變量名，在引用這個變量時寫法是變量名。如何用改變屬性值在中即代表文檔根元素。 Day03 - CSS 變量作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是...

dunizb 2019-08-20 18:09 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

codeKK 2019-08-02 16:16 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

SolomonXie 2019-08-26 13:43 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

HollisChuang 2019-08-30 10:50 評論0 收藏0