国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Backache / 1926人閱讀

摘要：設(shè)置值的注意事項(xiàng)自定義屬性可以以結(jié)尾但是解析器會(huì)自動(dòng)移除這個(gè)屬性的值，并按瀑布流的形式確定其優(yōu)先屬性。這里雖然有背景色的設(shè)置但是優(yōu)先級(jí)并沒有自定義屬性的高，故而的背景色是透明色翻譯參考

介紹

通常大型文檔或者應(yīng)用（甚至小規(guī)模的文檔或應(yīng)用）會(huì)包括大量的CSS。在這些CSS文件中通常會(huì)有大量相同的數(shù)據(jù)；例如，一個(gè)網(wǎng)站可能用了一個(gè)顏色主題并反復(fù)用三到四種顏色貫穿始終。改動(dòng)這些數(shù)據(jù)會(huì)非常困難并且容易出錯(cuò)，因?yàn)樗闵⒌胤植荚贑SS文件（甚至多個(gè)文件）中，可能無法使用尋找替換實(shí)現(xiàn)。

于是CSS自定義變量屬性應(yīng)運(yùn)而生，它允許用戶使用特定語法定義相關(guān)變量，并在一定范圍內(nèi)反復(fù)使用var()引用，改動(dòng)這些變量，引用這些變量的地方的CSS也將對(duì)應(yīng)地發(fā)生變化。

親測(cè)：ios9環(huán)境下沒有效果，ios9不支持ES56，推測(cè)與此有關(guān) 2017-11-5注。
語法 定義自定義屬性：--* 
以--開頭，后加變量名，具有繼承性，適用于所有元素，計(jì)算屬性，不適用于動(dòng)畫
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);
   }

以下使用方法錯(cuò)誤！！！

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

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

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

設(shè)置值的注意事項(xiàng)

自定義屬性可以以!important結(jié)尾, 但是CSS解析器會(huì)自動(dòng)移除這個(gè)屬性的值，并按瀑布流的形式確定其優(yōu)先屬性。換句話說，雖然可以使用!important,但是頂級(jí)優(yōu)先“!”的禁止其它同類CSS生效的作用并沒有實(shí)現(xiàn)CSS。
h1 {
    --font-color: lightblue!important;
    --Font-color: lightgreen;
    color: var(--font-color);
    color: var(--Font-color);
    //lightgreen
    }

繼承性與優(yōu)先級(jí)(可正常理解)

: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);
}

互相調(diào)用無效

        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);
        }

在不同范圍內(nèi)合法，事實(shí)上兩者在不同范圍內(nèi)指代了不同的變量

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

calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：



使用“+”、“-”、“*” 和 “/”四則運(yùn)算；


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


可以混合使用各種單位進(jìn)行計(jì)算；


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


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

變量初始默認(rèn)值

   .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 為默認(rèn)值blue
     注： var(--header-color, blue， red)無效
     */
   }

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

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

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

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

下面的代碼從語法上江是無錯(cuò)誤的，但是并無實(shí)際效果。因?yàn)?b>20px并不是一個(gè)背景色的有效值，如果沒有其他設(shè)置(必須優(yōu)先級(jí)高于這里的設(shè)置)或繼承的背景色，將會(huì)使用全局默認(rèn)的透明背景色。

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

        //這里雖然有背景色的設(shè)置但是優(yōu)先級(jí)并沒有自定義屬性的高，故而`p`的背景色是透明色
翻譯參考：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51282.html

相關(guān)文章

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

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

    王軍 評(píng)論0 收藏0

  • 關(guān)于sass、scss、less的概念性知識(shí)匯總

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

    HmyBmny 評(píng)論0 收藏0

  • 關(guān)于sass、scss、less的概念性知識(shí)匯總

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

    xuweijian 評(píng)論0 收藏0

  • 前端入門23-CSS預(yù)處理器（Less&Sass）

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

    freecode 評(píng)論0 收藏0

  • 前端利器：SASS基礎(chǔ)與Compass入門

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

    娣辯孩 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Backache

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<