CSS自定義變量屬性——像less，sass那樣在css中使用變量（譯）

Backache 發布于2019-08-01 17:39 / 1918人閱讀

摘要：設置值的注意事項自定義屬性可以以結尾但是解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而的背景色是透明色翻譯參考

介紹

通常大型文檔或者應用（甚至小規模的文檔或應用）會包括大量的CSS。在這些CSS文件中通常會有大量相同的數據；例如，一個網站可能用了一個顏色主題并反復用三到四種顏色貫穿始終。改動這些數據會非常困難并且容易出錯，因為它零散地分布在CSS文件（甚至多個文件）中，可能無法使用尋找替換實現。

于是CSS自定義變量屬性應運而生，它允許用戶使用特定語法定義相關變量，并在一定范圍內反復使用var()引用，改動這些變量，引用這些變量的地方的CSS也將對應地發生變化。

親測：ios9環境下沒有效果，ios9不支持ES56，推測與此有關 2017-11-5注。

語法定義自定義屬性：--*

以--開頭，后加變量名，具有繼承性，適用于所有元素，計算屬性，不適用于動畫

Name:             --*
Value:            
Initial:          (nothing, see prose)
Applies to:       all elements
Inherited:        yes
Percentages:      n/a
Media:            all
Computed value:    specified value with variables substituted (but see prose for "invalid variables")
Canonical order:   per grammar
Animatable:            no

使用舉例

初步使用

   :root {
     --main-color: #06c;
     --accent-color: #006;
   }
   /* The rest of the CSS file */
   #foo h1 {
     //引用變量
     color: var(--main-color);
   }

以下使用方法錯誤！！！

 他錯誤地嘗試使用變量名代替屬性名：
   .foo {
     --side: margin-top;
     var(--side): 20px;
   }
 這并不能實現`margin-top: 20px`，會拋出語法錯誤。

大小寫敏感
盡管--FOO與--foo都是合法的變量，但是當你引用前者指代的就是前者的值，后者亦然。

 h1 {
    --font-color: lightblue;
    --Font-color: lightgreen;
    color: var(--Font-color);
    //lightgreen
}

設置值的注意事項

自定義屬性可以以!important結尾, 但是CSS解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。換句話說，雖然可以使用!important,但是頂級優先“!”的禁止其它同類CSS生效的作用并沒有實現CSS。

h1 {
    --font-color: lightblue!important;
    --Font-color: lightgreen;
    color: var(--font-color);
    color: var(--Font-color);
    //lightgreen
    }

繼承性與優先級(可正常理解)

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

I inherited blue from the root element!

//blue

I got green set directly on me!

//green

While I got red set directly on me! //red

I’m red too, because of inheritance!

//red

```

可與正常屬性混用

:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}

互相調用無效

        body {
            font-size: 16px;
        }
        //h1最終大小為16px
        h1 {
            --font-color: lightblue!important;
            --Font-color: lightgreen;
            --one: calc(var(--two) + 30px);
            --two: calc(var(--one) - 50px);
            color: var(--font-color);
            color: var(--Font-color);
            font-size: var(--one);
        }

在不同范圍內合法，事實上兩者在不同范圍內指代了不同的變量

   
   one   { --foo: 10px; }   //10
   two   { --bar: calc(var(--foo) + 10px); } //20
   three { --foo: calc(var(--bar) + 10px); } //30

calc()使用通用的數學運算規則，但是也提供更智能的功能：

使用“+”、“-”、“*” 和 “/”四則運算；

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

變量初始默認值

   .component .header {
     color: var(--header-color, blue);
   }
   .component .text {
     color: var(--text-color, black);
   }
   
   /* In the larger application’s style: */
   .component {
     --text-color: #080;
     /* header-color 為默認值blue
     注： var(--header-color, blue， red)無效
     */
   }

變量的替換使用規范
var()并不是按照原文替換CSS字符

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

這無法設置 margin-top: 20px;(a length),而是等同于 margin-top: 20 px; (a number followed by an ident空格),這是一個不合法的屬性值. 不過, calc() 可以實現:

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

下面的代碼從語法上江是無錯誤的，但是并無實際效果。因為20px并不是一個背景色的有效值，如果沒有其他設置(必須優先級高于這里的設置)或繼承的背景色，將會使用全局默認的透明背景色。

       :root { --not-a-color: 20px; }
       p { background-color: red; }
       p { background-color: var(--not-a-color); }

        //這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而`p`的背景色是透明色

翻譯參考：

https://drafts.csswg.org/css-...

GPU云服務器云服務器自定義css html中使用css css中使用cdn 在c語言中全局變量

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

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

CSS自定義變量屬性——像less，sass那樣在css中使用變量（譯）

摘要：設置值的注意事項自定義屬性可以以結尾但是解析器會自動移除這個屬性的值，并按瀑布流的形式確定其優先屬性。這里雖然有背景色的設置但是優先級并沒有自定義屬性的高，故而的背景色是透明色翻譯參考介紹通常大型文檔或者應用（甚至小規模的文檔或應用）會包括大量的CSS。在這些CSS文件中通常會有大量相同的數據；例如，一個網站可能用了一個顏色主題并反復用三到四種顏色貫穿始終。改動這些數據會非常困難并...

王軍 2019-08-29 13:28 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 評論0 收藏0
前端入門23-CSS預處理器（Less&Sass）

摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網感謝大佬們的分享。正文-CSS預處理（less&Sass） CSS預處理什么是 CSS 預處理？為什么要有 CSS 預處理？這...

freecode 2019-04-23 13:07 評論0 收藏0
前端利器：SASS基礎與Compass入門

摘要：在吸取了的一些特性基礎上，有了大幅改進，也就是現在的。嵌套極大程度上降低了選擇器名稱和屬性的重復書寫。選擇器嵌套選擇器嵌套是指從一個選擇器中嵌套子選擇器，來實現選擇器的繼承關系。也已經成為的一個標配組件。 SASS是Syntactically Awesome Stylesheete Sass的縮寫，它是css的一個開發工具，提供了很多便利和簡單的語法，讓css看起來更像是一門...

娣辯孩 2019-08-28 17:54 評論0 收藏0