一篇文章帶你學(xué)會(huì)css變量(推薦!)
我要評(píng)論CSS 變量 這個(gè)是 CSS 新功能，2017年3月，微軟宣布 Edge 瀏覽器將支持 CSS 變量,所有主要瀏覽器已經(jīng)都支持了。
css 變量語(yǔ)法
變量的聲明
聲明變量的時(shí)候，變量名前面要加兩根連詞線（--）
// 全局聲明
:root{
--foo: #ed145b;
--bar: #F7EFD2;
}
例如上面我們申明了2個(gè)變量：--foo和--bar，其實(shí)你只需要把它們理解成css自定義屬性看待，它們與color、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義，注意css變量名稱是區(qū)分大小寫的，通常我們寫的css是不區(qū)分。
你可能會(huì)問，為什么選擇兩根連詞線（--）表示變量？因?yàn)?code>$foo被 Sass 用掉了，@foo被 Less 用掉了。為了不產(chǎn)生沖突，官方的 CSS 變量就改用兩根連詞線了。
各種值都可以放入 CSS 變量。
// css文件中的樣子
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}
// html文件中的樣子
<div class="ggg" style="--my-var:black; color: var(--my-var); ">
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</div>
再次提醒：可以把css變量理解成css自定義屬性看待，它們與
color、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義
變量名大小寫敏感，--header-color和--Header-Color是兩個(gè)不同變量。
命名規(guī)范
關(guān)于命名這個(gè)東西，各種語(yǔ)言都有些顯示，例如CSS選擇器不能是數(shù)字開頭，JS中的變量是不能直接數(shù)值的，但是，在CSS變量中，這些限制通通沒有，如：
:root {
--1: #369;
}
body {
background-color: var(--1);
}
不能包含$，[，^，(，%等字符，普通字符局限在只要是“數(shù)字[0-9]”“字母[a-zA-Z]”“下劃線_”和“短橫線-”這些組合，但是可以是中文，日文或者韓文，例如：
body {
--深藍(lán): #369;
background-color: var(--深藍(lán));
}
全局變量:root偽類可以看做是一個(gè)全局作用域，在里面聲明的變量，頁(yè)面下面的所有選擇器都可以拿到變量
:root {
--color: blue;
}
.box{
color: var(--color);
}
局部變量
.pather{
--color:red
}
.child{
color:var(--color)
}
變量作用域同一個(gè) CSS 變量，可以在多個(gè)選擇器內(nèi)聲明。讀取的時(shí)候，優(yōu)先級(jí)最高的聲明生效。這與 CSS 的"層疊"（cascade）規(guī)則是一致的
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>藍(lán)色</p>
<div>綠色</div>
<div id="alert">紅色</div>
這就是說，變量的作用域就是它所在的選擇器的有效范圍。
變量的獲取
var()函數(shù)用于讀取變量。
body {
--bgc: #000;
--color: #f00;
}
.pather{
width: 200px;
text-align: center;
background-color: var(--bgc);
color: var(--color);
}
<div class="pather">
css變量
<div class="child">var()函數(shù)</div>
</div>
變量設(shè)置默認(rèn)值var()函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會(huì)使用這個(gè)默認(rèn)值。
color: var(–color,#ccc);
第二個(gè)參數(shù)不處理內(nèi)部的逗號(hào)或空格，都視作參數(shù)的一部分。
var(--font-stack, "Roboto", "Helvetica"); var(--pad, 10px 15px 20px);
變量引用var()函數(shù)還可以用在變量的聲明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
注意，變量值只能用作屬性值，不能用作屬性名
.foo {
--side: margin-top;
/* 無(wú)效 */
var(--side): 20px;
}
上面代碼中，變量–side用作屬性名，這是無(wú)效的
變量值的類型
如果變量值是一個(gè)字符串，可以與其他字符串拼接。
--bar: 'hello'; --foo: var(--bar)' world';
如果變量值是數(shù)值，不能與數(shù)值單位直接連用。
.child {
--size: 20;
/*無(wú)效*/
font-size: var(--size)px;
}
數(shù)值與單位直接寫在一起，這是無(wú)效的。必須使用calc()函數(shù)，將它們連接。
.child {
--size: 20;
font-size: calc(var(--size)*1px);
}
響應(yīng)式布局
CSS 是動(dòng)態(tài)的，頁(yè)面的任何變化，都會(huì)導(dǎo)致采用的規(guī)則變化。
利用這個(gè)特點(diǎn)，可以在響應(yīng)式布局的media命令里面聲明變量，使得不同的屏幕寬度有不同的變量值。
body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}
兼容性處理
對(duì)于不支持 CSS 變量的瀏覽器，可以采用下面的寫法。
a {
color: #7F583F;
color: var(--primary);
}
也可以使用@support命令進(jìn)行檢測(cè)。
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
JavaScript 操作
JavaScript 也可以檢測(cè)瀏覽器是否支持 CSS 變量。
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}
JavaScript 操作 CSS 變量的寫法如下。
// 設(shè)置變量
document.body.style.setProperty('--primary', '#7F583F'); //給body節(jié)點(diǎn)設(shè)置局部變量
document.documentElement.style.setProperty('--primary', '#7F583F'); //給html節(jié)點(diǎn)設(shè)置全局變量，也就是:root{}內(nèi)的變量
document.querySelector('.ggg').style.setProperty("--my-var", 'pink'); // 給ggg樣式的dom設(shè)置一個(gè)局部變量
// 讀取變量
document.body.style.getPropertyValue('--primary').trim(); //獲取body行間樣式中的局部變量
document.documentElement.style.getPropertyValue('--primary').trim(); //獲取html根節(jié)點(diǎn)行間樣式中的變量
getComputedStyle(document.documentElement).getPropertyValue('--time'); // 獲取html根節(jié)點(diǎn)中的變量，也就是:root{}中的變量，如果是在css表中設(shè)置的需要這種方式獲取
// 注意：getComputedStyle是獲取生效的樣式，style.getPropertyValue是獲取行間樣式，有一點(diǎn)的區(qū)別，不懂的看后面例子，細(xì)細(xì)品
document.querySelector('.ggg').style.getPropertyValue("--my-var"); //獲取ggg樣式節(jié)點(diǎn)的行間樣式中局部變量
getComputedStyle(document.querySelector('.ggg')).getPropertyValue("--my-var"); //獲取ggg樣式節(jié)點(diǎn)的生效樣式中局部變量
// 刪除變量
document.body.style.removeProperty('--primary'); //局部
document.documentElement.style.removeProperty('--primary'); //全局
寫了一個(gè)例子(沒有寫刪除變量，會(huì)讀取就會(huì)刪除了)，大家細(xì)細(xì)品一下讀取變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--my-var: red;
--main-color: #4d4e53;
--main-bg: rgb(211, 36, 36);
}
body {
--my-var: blue;
--main-color: #1d39c7;
--main-bg: rgb(81, 153, 65);
background: var(--main-bg);
color: var(--main-color);
}
.aaa {
background: var(--main-bg);
color: var(--main-color);
}
.ggg {
--my-var: green;
--main-color: #1d39c7;
--main-bg: rgb(38, 8, 8);
background: var(--main-bg);
color: var(--main-color);
}
</style>
</head>
<body style="--my-var:black;">
<div class="aaa" style="color: var(--my-var);">
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</div>
<div class="ggg" style="color: var(--my-var);">
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</div>
<div class="ggg" style="color: var(--my-var);">
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</div>
<div class="ccc" style="color: var(--my-var);">
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>
</div>
<script>
var a = document.body.style.getPropertyValue("--my-var");
// black , 因?yàn)閎ody行間樣式有--my-var變量
console.log('a', a);
var b = getComputedStyle(document.body).getPropertyValue("--my-var");
// black , 因?yàn)閎ody行間樣式有--my-var變量，優(yōu)先級(jí)大于樣式表中的，所以打印black，不是blue
console.log('b', b);
var c = document.documentElement.style.getPropertyValue("color");
// 空 , 因?yàn)閔tml節(jié)點(diǎn)行間樣式?jīng)]有--my-var變量
console.log('c', c);
var d = getComputedStyle(document.documentElement).getPropertyValue("--my-var");
// red, 獲取html根節(jié)點(diǎn)的變量，也就是:root{}中的變量
// 注意：getComputedStyle是獲取生效的樣式，style.getPropertyValue是獲取行間樣式，有一點(diǎn)的區(qū)別
console.log('d', d);
var e = document.querySelector('.ggg').style.getPropertyValue("--my-var");
// 空 , 與c的原因一樣，因?yàn)間gg節(jié)點(diǎn)行間樣式?jīng)]有--my-var變量
console.log('e', e);
var f = getComputedStyle(document.querySelector('.ggg')).getPropertyValue("--my-var");
// green, 樣式表中有--my-var有變量
console.log('f', f);
// 修改一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
document.querySelector('.ggg').style.setProperty("--my-var", 'pink');
var g = document.querySelector('.ggg').style.getPropertyValue("--my-var");
// pink, 由于上面通過setProperty設(shè)置了--my-var變量，所以現(xiàn)在可以獲取到變量
console.log('g', g);
</script>
</body>
</html>
這意味著，JavaScript 可以將任意值存入樣式表。下面是一個(gè)監(jiān)聽事件的例子，事件信息被存入 CSS 變量。
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});
那些對(duì) CSS 無(wú)用的信息，也可以放入 CSS 變量。
--foo: if(x > 5) this.width = 10;
上面代碼中，--foo的值在 CSS 里面是無(wú)效語(yǔ)句，但是可以被 JavaScript 讀取。這意味著，可以把樣式設(shè)置寫在 CSS 變量中，讓 JavaScript 讀取。
所以，CSS 變量提供了 JavaScript 與 CSS 通信的一種途徑。
總結(jié)
到此這篇關(guān)于css變量的文章就介紹到這了,更多相關(guān)CSS變量使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 本文主要介紹了CSS變量實(shí)現(xiàn)主題切換的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-23
CSS變量對(duì)JS交互組件開發(fā)帶來(lái)的提升與變革示例代碼詳解
這篇文章主要介紹了CSS變量對(duì)JS交互組件開發(fā)帶來(lái)的提升與變革示例代碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-01
這篇文章主要介紹了CSS變量實(shí)現(xiàn)暗黑模式的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-03-16- 這篇文章主要介紹了通過CSS變量修改樣式的方法示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-02-15
- 當(dāng)Web項(xiàng)目變得越來(lái)越大時(shí)，他的CSS會(huì)變得像天文數(shù)字那么大而且還變得混亂。為了幫助我們解決這個(gè)問題，新的CSS變量很快就會(huì)出現(xiàn)在主流瀏覽器中，這篇文章主要介紹了你真的2019-01-15
- 這篇文章主要介紹了CSS中關(guān)于變量的基本教程,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-03
