成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

在原生CSS中使用變量

FreeZinG / 1405人閱讀

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

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

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

先來兩個在線demo感受一下：

demo1

demo2

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

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

如何使用變量

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

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

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

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

無需多次定義，同樣的屬性可以重復使用

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

注意點

變量名稱必須以 -- 開頭

變量只能存儲一個屬性的值，而不能用來存儲一個屬性，如下例子是錯誤的：

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

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

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

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

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

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

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

作用域

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

全局變量

通過在:root中申明變量，就可以申明一個全局變量，可以在整個文檔結(jié)構(gòu)中使用這個變量，因為CSS變量是可繼承的。

: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;
}
/*當前元素及其子元素中使用*/
.modal, 
.modal-content {
  padding-top: var(--modal-padding-top); /*30px*/;
}
/*在其他元素上無效*/
body {
  padding-top: var(--modal-padding-top); /*無效設(shè)置，使用默認值*/
}
變量的繼承

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

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

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

同名變量可以重復申明，這樣變量就會有了優(yōu)先級的問題，如下例子：

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


我顯示綠色



  我顯示藍色
  
那么我呢？

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

無效變量

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

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

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



  

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

可以根據(jù)屏幕寬度的變化來改變變量的值，從而更容易的實現(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的一部分，這意味著我們可以通過javascript來訪問/修改css變量的值，這是scss等css預處理器所做不到的。
要用JavaScript來更新CSS變量，需要調(diào)用已聲明變量元素上的style對象上的 setProperty 方法。

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

//在根元素（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來改變背景色

參考文檔

Using CSS custom properties (variables)

CSS Variables overview

Everything you need to know about CSS Variables

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115735.html

相關(guān)文章

  • 原生css 中變量的使用

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

    番茄西紅柿 評論0 收藏0

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

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

    sanyang 評論0 收藏0

  • 原生css變量聲明

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

    Imfan 評論0 收藏0

  • Sass快速入門學習筆記

    摘要：在中，你可以像俄羅斯套娃那樣在規(guī)則塊中嵌套規(guī)則塊。這個過程中，用了兩步，每一步都是像打開俄羅斯套娃那樣把里邊的嵌套規(guī)則塊一個個打開。與此類似，會命中元素和類名為的元素。這種選擇器稱為群組選擇器。1. 使用變量; sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一 次的屬...

    appetizerio 評論0 收藏0

  • 「翻譯」逐步替換Sass

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

    explorer_ddf 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<