css自定義屬性（css變量）

Null 發布于2019-08-29 16:20 / 2878人閱讀

摘要：但不能包含，，，，等字符，普通字符局限在只要是數字字母下劃線和短橫線這些組合，但是可以是中文，日文或者韓文。

前言

剛開始的“css變量”，經擴展之后，稱為“css自定義屬性”
當各種預處理器滿天飛的時候，css變量已經開始漸漸普及
在特定的應用場景，css變量確實發揮了很大的作用
下面開始學習css變量

正文 一、變量的聲明和使用

CSS選擇器不能是數字開頭，JS中的變量是不能直接數值的，但是，在CSS變量中，這些限制通通沒有。但不能包含$，[，^，(，%等字符，普通字符局限在只要是“數字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文。

1. 聲明：大小寫敏感, --variable-name: variable-value;

:root{
    --color: red;
}

2. 使用：使用var(變量名)來使用一個變量

#div {
    color: var(color)
}

3. 變量組合使用
使用變量的時候，通常不會多帶帶使用，可以組合使用
當變量的值是字符串時，可以直接拼接，如下

:root{
  --screen-category: "category"  //變量值是字符串
}
body:after {
  content: "--screen-category: "var(--screen-category);  // 直接拼接
}

當變量的值是數值時，必須使用calc()函數計算，就算還是簡單的單位拼接

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

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

4. 變量未定義和錯誤定義
如果我們使用的變量沒有定義，則使用后面的值作為元素的屬性值, 如下所示
body里面訪問不到.box定義的--1，因此使用#cd0000

.box {
  --1: #369; 
}
body {
  background-color: var(--1, #cd0000);
}

使用變量時，若變量已定義，但是變量的值不正確，則使用缺省值,如:

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

結果body的顏色是transparent，因為background-color的缺省值就是transparent

二、繼承和作用域

1. 作用域
使用:root{}來定義全局css變量
想讓變量在局部可用，就定義在某個特定的選擇器下
還是下面這段代碼

:root{
  color: red; //全局可用
}
.box {
  --1: #369;  //只在.box這個作用域可用 
}
body {
  background-color: var(--1, #cd0000);
}

2. 繼承


   
   


.wrapper {
   --color: red;
}

.content1 {
   --color: yellow;
}

content1的--color為yellow
content2的--color沒有定義，繼承了wrapper的--color為red
--color: yellow只在content1的作用域內有效

三、js操作css變量

:root {
   --color: red;
}

//讀取
var root = getComputedStyle(document.documentElement);
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"

//改變
document.documentElement.style.setProperty("--color", "yellow");
var color = root.getPropertyValue("--color").trim();
console.log(color);  // "100px"

//刪除
document.documentElement.style.removeProperty("--color");
var color = root.getPropertyValue("--color").trim();
console.log(color); // "70px"

四、與預處理器(sass,less)比較

1. css變量：

動態性，可以在運行時更改
可以方便地從js讀寫
可繼承，可組合，有作用域

2. 預處理器：

預處理器的變量不是動態的，在運行時不可更改
預處理器的變量沒有作用域的說法
不能與js交互

五、兼容

基本上能兼容大部分主流瀏覽器，直接使用沒有太大問題
如果想使用但又想兼容所有瀏覽器，就是用下面的方法檢測瀏覽器是否支持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");
}

六、常用場景

為風格統一而使用顏色變量

一致的組件屬性（布局，定位等）

避免代碼冗余(響應式布局，制動動畫)

這里是常用場景的demo：https://github.com/shinyshine...

云服務器 GPU云服務器自定義css css屬性訪問CSS屬性 position屬性，css

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

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

CSS 自定義屬性 - 入門

摘要：變量的函數引用的自定義屬性被稱為變量。為此，可讀性和可維護性是自定義屬性最大的優勢。自定義屬性作用域在中，變量有作用域一說。因此，在選擇器中聲明的自定義屬性，其作用域的范圍是全局范圍，也就是全局作用域。引言 ??CSS語言是一種聲明式語言，不像其他語言有變量、條件和邏輯等特性，因為這個原因，社區中有了各種CSS處理器語言，比如Sass、LESS和Stylus等。這些處理器語言引入了一...

seanlook 2019-08-30 15:44 評論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

light 2019-08-02 16:14 評論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

yankeys 2019-08-29 18:43 評論0 收藏0
CSS變量（自定義屬性）實踐指南

摘要：和這樣的預處理器，讓我們的代碼保持良好的結構和可維護性。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。而你是無法對預處理器中的變量做上面這些操作的。本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請注明出處：葡萄城官網，葡萄城...

番茄西紅柿 2019-04-23 13:26 評論0 收藏0
CSS變量（自定義屬性）實踐指南

摘要：變量，或者用它的官方稱謂，叫作自定義屬性，已經可用，并且有非常棒的瀏覽器支持，而也正在取得進展。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 Sass和Less這樣的預處理器，讓我們的CSS代碼保持良好的結構和可維護性。像變量、混合(mixin...

source 2019-08-29 16:33 評論0 收藏0