CSS原生變量(CSS自定義屬性)

示例地址：https://github.com/ccyinghua/Css-Variables

一、css原生變量的基礎(chǔ)用法

變量聲明使用兩根連詞線"--"表示變量，"$color"是屬于Sass的語(yǔ)法，"@color"是屬于Less的語(yǔ)法，為避免沖突css原生變量使用

"--"

// 聲明變量 --color:#000;// 讀取變量 var(--color)

注：
1、變量聲明不能包含$，[，^，(，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文?
2、變量的值可以是顏色、字符串、多個(gè)值的組合等

示例：

<h3>css variables基礎(chǔ)使用</h3> <div class="btn_box"><button type="button" class="login_btn">登錄</button> </div> /* css variables基礎(chǔ)使用 */ :root{--content1:"abc";--content2:"efg";--width:calc(100px 200px);--btn-bg:#279cff;--字體:18px; } .btn_box:before{content:var(--content1)' with add';display:block;line-height: 50px; } .btn_box:after{content:var(--content1)','var(--content2);display:block;line-height: 50px; } .login_btn{width:var(--width);height:50px;border-radius:30px;border:0;background: var(--btn-bg);box-shadow: 0 5px 5px rgba(39,156,255,.42);text-align: center;font-size:var(--字體);line-height: 50px;color:#fff;cursor:pointer;outline:none; }

?

二、作用域

1、變量是遵循CSS語(yǔ)法的優(yōu)先級(jí)高低的?

Id > class > 標(biāo)簽 > *
2、注意并無(wú)!important這種用法；
3、如果變量所在的選擇器和使用變量的元素沒有交集,是沒有效果的。

<div>藍(lán)色</div> <div class="divbox">綠色</div> <div class="divbox" id="alert">紅色</div> :root { --color: blue; } .divbox { --color: green; } #alert { --color: red; } div{color: var(--color);width:300px;line-height: 50px;text-align: center; }

三、響應(yīng)式

div {--color: #7F583F;--bg: #F7EFD2; }.mediabox {color: var(--color);background: var(--bg); }@media screen and (min-width: 768px) {body {--color: #F7EFD2;--bg: #7F583F;} }

四、注意事項(xiàng)

1、屬性名(例：width/height/margin....等)不可以走變量

.divbox {--side: margin-top;/* 無(wú)效 */var(--side): 20px; }

2、var()的完整的寫法是"var(<自定義屬性名> [, <默認(rèn)值 ]?)",在變量的名字后面可以有一個(gè)默認(rèn)值，如果引用的變量沒有定義（注意，僅限于沒有定義），則使用后面的值作為元素的屬性值

body {background:var(--bg,skyblue); }

3、如果變量值是不合法的，例如下面設(shè)置背景色background只能是色值而不能是像素，則使用背景色屬性的默認(rèn)值代替。

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

等同于

body {--bg: 20px;background-color: #369;background-color: transparent; }

4、CSS變量設(shè)置數(shù)值

(1)

h3 {--size: 30; font-size: var(--size)px; }

結(jié)果h3元素的字體大小就是本身的默認(rèn)大小?

(2)

h3 {--size: 30px; font-size: var(--size); }等于 h3 {font-size:30px; }

(3)使用CSS3 calc()計(jì)算：

h3 {--size: 30; font-size: calc(var(--size) * 1px); } 等于 h3 {font-size:30px; }

5、如果變量值帶有單位，就不能寫成字符串。

/* 無(wú)效 */ .divbox {--size: '30px';font-size: var(--size); }/* 有效 */ .divbox {--size: 30px;font-size: var(--size); }

6、進(jìn)行calc()運(yùn)算時(shí)，最好能提供默認(rèn)值: calc(var(--base-line-height, 0) * 1rem)

7、不能作為媒體查詢值使用：

@media screen and (min-width: var(--desktop-breakpoint) {})

8、圖片地址，如url(var(--image-url)) ，不會(huì)生效

五、兼容性處理

檢測(cè)瀏覽器是否支持CSS自定義屬性的方法。

/*css*/@supports ( (--a: 0)) {/* supported */ }@supports ( not (--a: 0)) {/* not supported */ } // Jsif (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {alert('CSS properties are supported'); } else {alert('CSS properties are NOT supported'); }

六、JS操作變量

CSS 變量可以和 JS 互相交互

:root{--testMargin:75px; } // 讀取 var root = getComputedStyle(document.documentElement); var cssVariable1 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable1); // '75px'// 寫入 document.documentElement.style.setProperty('--testMargin', '100px'); var cssVariable2 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable2); // '100px'// 刪除 document.documentElement.style.removeProperty('--testMargin'); var cssVariable3 = root.getPropertyValue('--testMargin').trim(); console.log(cssVariable3); // '75px'

javascript可以把任意值存入css變量，可以讀取變量的值，實(shí)現(xiàn)javascript與css的通信。

七、CSS variables與預(yù)處理器的不同

1、預(yù)處理器變量不是實(shí)時(shí)的

$color:#7F583F;@media screen and (min-width: 768px) {$color: #F7EFD2; }.mediabox {background: $color; }

編譯結(jié)果

.mediabox {background: #7F583F; }

2、預(yù)處理器不能限定作用域

$zcolor:blue; .ulbox {$zcolor:red; } ul{color: $zcolor; }

編譯為

ul {color: blue; }

3、預(yù)處理器變量不可互操作

原生的CSS自定義屬性可以與任何CSS預(yù)處理器或純CSS文件一起使用。

4、總結(jié)

• 相較于傳統(tǒng)的 LESS 、SASS 等預(yù)處理器變量，CSS 變量的優(yōu)點(diǎn)在于:
• CSS 變量的動(dòng)態(tài)性，能在頁(yè)面運(yùn)行時(shí)更改，而傳統(tǒng)預(yù)處理器變量編譯后無(wú)法更改
• CSS 變量能夠繼承，能夠組合使用，具有作用域
• 配合 Javascript 使用，可以方便的從 JS 中讀/寫

八、CSS原生變量的兼容性

https://caniuse.com/#search=css var

?

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ha2b1icb&title=CSS Variables

總結(jié)

以上是生活随笔為你收集整理的CSS Variables的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。