成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

在原生CSS中使用變量

FreeZinG / 1348人閱讀

摘要：而現(xiàn)在，我們可以在原生中使用變量了先來(lái)兩個(gè)在線(xiàn)感受一下定義變量，也稱(chēng)為自定義屬性。但是局部變量只能夠在被申明的元素及其子元素中使用。在中使用變量變量是的一部分，這意味著我們可以通過(guò)來(lái)訪問(wèn)修改變量的值，這是等預(yù)處理器所做不到的。

本文首發(fā)于我的博客

一直以來(lái)，CSS作為一種申明式的樣式標(biāo)記語(yǔ)言，很難像如javascript等命令式編程語(yǔ)言一樣通過(guò)定義和使用變量的方式來(lái)維護(hù)和追蹤某些狀態(tài)。后來(lái)隨著scss,less等CSS預(yù)處理器的出現(xiàn)，我們可以像優(yōu)秀的開(kāi)源框架bootstrap那樣，通過(guò)維護(hù)一個(gè)_variables.scss變量文件的方式來(lái)維護(hù)一個(gè)龐大的項(xiàng)目。但預(yù)處理需要編譯，并非CSS原生支持。而現(xiàn)在，我們可以在原生CSS中使用變量了！

先來(lái)兩個(gè)在線(xiàn)demo感受一下：

demo1

demo2

定義 
CSS變量，也稱(chēng)為CSS自定義屬性。通過(guò)以--開(kāi)頭的自定義屬性來(lái)設(shè)置變量名，存儲(chǔ)一些特定值，在需要的地方使用 var() 來(lái)訪問(wèn)。如：
p {
  --primary-color: #6bc30d;
  color: var(--primary-color);
}
如何申明變量

可以像定義任何css屬性一樣來(lái)申明變量，不同的是，變量名必須以--開(kāi)頭。如 --primary-color: #6bc30d

如何使用變量

而要使用一個(gè)變量的值，需要使用 var() 函數(shù)，并將變量的名稱(chēng)作為參數(shù)傳入。 如 color: var(--primary-color);

var()函數(shù) 
var()函數(shù)可以代替元素中任何屬性中的值的任何部分。

var() 函數(shù)接受兩個(gè)參數(shù)，參數(shù)一是要替換的自定義屬性的名稱(chēng)，參數(shù)二是可選的，作為參數(shù)一無(wú)效時(shí)候的回退值（如果第一個(gè)參數(shù)引用的自定義屬性無(wú)效，則該函數(shù)將使用第二個(gè)值）。

var(  [,  ]? )
/* 自定義屬性名*/
/* 聲明值（回退值）*/
使用變量的意義

無(wú)需多次定義，同樣的屬性可以重復(fù)使用

讓CSS文件可讀易維護(hù)（如主題樣式，只需修改一個(gè)變量即可，而不再是枯燥的查找替換），靈活性更高

注意點(diǎn)

變量名稱(chēng)必須以 -- 開(kāi)頭

變量只能存儲(chǔ)一個(gè)屬性的值，而不能用來(lái)存儲(chǔ)一個(gè)屬性，如下例子是錯(cuò)誤的：

/*這樣是錯(cuò)誤的*/
p {
  --primary-color: color;
  var(--primary-color) : #6bc30d
}

變量中無(wú)法使用加減等數(shù)學(xué)方法，如果需要使用計(jì)算，則可以使用 calc 函數(shù)：

/*這樣是錯(cuò)誤的*/
p {
  --font-size : 20px * 2;
  font-size: var(--font-size);
}
/*這樣是正確的*/
p {
  --font-size : calc(20px * 2);
  font-size: var(--font-size); /*40px*/
}
/*這樣拼接也是無(wú)效的*/
p {
  --font-size: 20;
  font-size: var(--font-size)px; /*無(wú)效*/
}
/*這樣是有效的：*/
p {
  --font-size: 20;
  font-size: calc(var(--font-size) * 1px); /*20px*/
}

CSS變量是區(qū)分大小寫(xiě)的

/*這是兩個(gè)不同的變量*/
:root {
 --color: blue;
--COLOR: red;
}
與scss等CSS預(yù)處理中變量的區(qū)別

CSS變量是瀏覽器原生支持的，不需要經(jīng)過(guò)編譯就可以使用

CSS變量是DOM的一部分，可以使用JS直接修改

作用域

雖然可以在css的任何地方定義變量，但是css變量也是有作用域的。CSS的變量作用域分為全局作用域和局部作用域。因此在申明一個(gè)變量之前，首先要確定這個(gè)變量要用在哪里？

全局變量

通過(guò)在:root中申明變量，就可以申明一個(gè)全局變量，可以在整個(gè)文檔結(jié)構(gòu)中使用這個(gè)變量，因?yàn)镃SS變量是可繼承的。

:root{
  --primay-color: #6bc30d;
}
/* 在任何地方都可以使用`:root`中定義的全局變量 */
p, div , a {
  color : var(--primay-color);
}
#myDiv, .myDiv {
  color : var(--primay-color);
}
局部變量

可以在除:root外的任何地方申明局部變量。但是局部變量只能夠在被申明的元素及其子元素中使用。局部變量更多的應(yīng)用在值覆蓋上。

.modal {
  --modal-padding-top: 30px;
}
/*當(dāng)前元素及其子元素中使用*/
.modal, 
.modal-content {
  padding-top: var(--modal-padding-top); /*30px*/;
}
/*在其他元素上無(wú)效*/
body {
  padding-top: var(--modal-padding-top); /*無(wú)效設(shè)置，使用默認(rèn)值*/
}
變量的繼承

與其他CSS屬性一樣，CSS中的變量也是可以繼承的。

:root{
  --color: red;
}
P {
  --pColor: green;
  color: var(--color); /*red*/
}
p > span{
  color : var(-pColor); /*green*/
}

多個(gè)申明中變量的優(yōu)先級(jí)

同名變量可以重復(fù)申明，這樣變量就會(huì)有了優(yōu)先級(jí)的問(wèn)題，如下例子：

:root {
  --color: red;
}
div {
  --color: green;
}
#myDiv {
  --color: yellow; 
  --color: blue; 
}
* {
  color: var(--color);
}
我正常顯示紅色


我顯示綠色



  我顯示藍(lán)色
  
那么我呢？

如圖，div中的局部變量覆蓋了:root中設(shè)置的值，而特定ID的div元素#myDiv又覆蓋了div中的值，最后作為#myDiv的子元素p繼承了其父級(jí)的值，而不是使用root中申明的值

無(wú)效變量

對(duì)于變量來(lái)講，CSS屬性的有效性并不適用。對(duì)于變量這種自定義屬性，即便在上下文環(huán)境中這個(gè)值是無(wú)意義的，但是都能夠通過(guò)var()函數(shù)調(diào)用。無(wú)意義的變量值會(huì)導(dǎo)致無(wú)效的CSS申明。通過(guò)var()函數(shù)調(diào)用后會(huì)被解析為初始值。

:root {
  --color: 20px;
}
p {
  --font-size: green;
  background-color: var(--color); 
  /* background-color: 20px; 無(wú)效，將回退為transparent */
}
在html屬性中使用css變量

就像其他CSS屬性一樣，在html中可以通過(guò)內(nèi)聯(lián)變量來(lái)設(shè)置變量的值，并且也能夠正常工作



  

    我使用內(nèi)聯(lián)變量值得方式來(lái)設(shè)置樣式
在媒體查詢(xún)中使用css變量

可以根據(jù)屏幕寬度的變化來(lái)改變變量的值，從而更容易的實(shí)現(xiàn)響應(yīng)式布局。

:root {
  --font-size: 30px;
  --color: red;
}
html{
  color: var(--color);
  font-size: var(--font-size);
}

@media screen and (min-width: 480px) {
  :root {
    --font-size: 50px;
    --color: green;
  }
}
@media screen and (min-width: 760px) {
  :root {
    --font-size: 100px;
    --color: blue;
  }
}

在js中使用css變量

css變量是DOM的一部分，這意味著我們可以通過(guò)javascript來(lái)訪問(wèn)/修改css變量的值，這是scss等css預(yù)處理器所做不到的。
要用JavaScript來(lái)更新CSS變量，需要調(diào)用已聲明變量元素上的style對(duì)象上的 setProperty 方法。

setProperty() 
//語(yǔ)法
element.style.setProperty(propertyName, value, priority);
//propertyName 是一個(gè) DOMString 被更改的CSS屬性.
//value <可選> 是一個(gè) DOMString 新的屬性值. 如果沒(méi)有指定, 則當(dāng)作空字符.不能包含 "!important"
//priority <可選> 是一個(gè) DOMString。允許 "important" CSS 優(yōu)先被設(shè)置. 如果沒(méi)有指定, 則當(dāng)作空字符.

//在根元素（html）上更新變量值
document.documentElement.style.setProperty(propertyName, value)
示例 
:root {
  --font-size: 20px;
  --background: red;
}
body {
  font-size: var(--font-size);
  background-color: var(--background);
  color: #fff;
}
使用JavaScript來(lái)改變背景色

參考文檔

Using CSS custom properties (variables)

CSS Variables overview

Everything you need to know about CSS Variables

本文首發(fā)于我的博客

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115735.html

相關(guān)文章

  • 原生css 中變量的使用

    摘要：函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。注意，變量值只能用作屬性值，不能用作屬性名。如果變量值是數(shù)值，不能與數(shù)值單位直接連用。六兼容性處理對(duì)于不支持變量的瀏覽器，可以采用下面的寫(xiě)法。那些對(duì)無(wú)用的信息，也可以放入變量。前兩天看到阮大神的一篇在css中使用變量的文章，整理了一下。 這個(gè)重要的 CSS 新功能，所有主要瀏覽器已經(jīng)都支持了。本文全面介紹如何使用它，你會(huì)發(fā)現(xiàn)原生 CSS 從此變得異...

    番茄西紅柿 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇--CSS/CSS3中的原生變量var詳解

    摘要：但由于預(yù)處理器不在瀏覽器中運(yùn)行并且無(wú)法看到標(biāo)記，它們不能這樣做?？绮煌墓ぞ呒蛏贤泄艿牡谌綐邮奖砉蚕眍A(yù)處理器變量是不可能或至少不容易的。原生的自定義屬性可以與任何預(yù)處理器或純文件一起使用。 使用語(yǔ)法 首先我們先來(lái)看一個(gè)例子：html代碼： 這是一段文字 css代碼： .element { width:200px; height:200px; --main-bg-colo...

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

  • 原生css變量聲明

    摘要：原生變量聲明噫我為什么要用原生這個(gè)名詞啊，管他呢。我發(fā)現(xiàn)了一個(gè)不得了的東西，接觸前端都有一年多的時(shí)間了，今天才知道原生也可以變量聲明這個(gè)黑科技啊。 原生css變量聲明 噫~~~我為什么要用原生css這個(gè)名詞啊，管他呢。我發(fā)現(xiàn)了一個(gè)不得了的東西，接觸前端都有一年多的時(shí)間了，今天才知道原生css也可以變量聲明這個(gè)黑科技啊。我是不是和時(shí)代脫軌太長(zhǎng)時(shí)間了。好了，來(lái)吧，介紹一下這個(gè)東東。統(tǒng)計(jì)一下...

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

  • Sass快速入門(mén)學(xué)習(xí)筆記

    摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個(gè)過(guò)程中，用了兩步，每一步都是像打開(kāi)俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個(gè)個(gè)打開(kāi)。與此類(lèi)似，會(huì)命中元素和類(lèi)名為的元素。這種選擇器稱(chēng)為群組選擇器。1. 使用變量; sass讓人們受益的一個(gè)重要特性就是它為css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值?；蛘撸瑢?duì)于僅使用過(guò)一 次的屬...

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

  • 「翻譯」逐步替換Sass

    摘要：本文來(lái)自心譚博客譯文逐步替換，最新文章請(qǐng)見(jiàn)導(dǎo)航頁(yè)，歡迎交流翻譯說(shuō)明這是一篇介紹現(xiàn)代核心特性的文章，并且借助進(jìn)行橫向?qū)Ρ?，充分體現(xiàn)了作為一門(mén)設(shè)計(jì)語(yǔ)言的快速發(fā)展以及新特性為我們開(kāi)發(fā)者帶來(lái)的強(qiáng)大生產(chǎn)力。 本文來(lái)自心譚博客·「譯文」逐步替換Sass，最新文章請(qǐng)見(jiàn)導(dǎo)航頁(yè)，歡迎交流??ヽ(°▽°)ノ? 翻譯說(shuō)明 這是一篇介紹現(xiàn)代 css 核心特性的文章，并且借助 sass 進(jìn)行橫向?qū)Ρ?，充分體現(xiàn)了...

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

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

0條評(píng)論

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