這篇文章主要介紹了關於CSS的變數variable的解析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
前面的話
一直以來,CSS中是沒有變數而言的,要使用 CSS 變數,只能藉助 SASS 或者 LESS 這類先行編譯器。新的草案發布之後,直接在 CSS 中定義和使用變數不再是幻想了。本文將詳細介紹CSS變數variable
基本用法
CSS 變數是由CSS作者定義的實體,其中包含要在整個文檔中重複使用的特定值。使用自訂屬性來設定變數名,並使用特定的 var() 來訪問
相容性:移動端和IE瀏覽器不相容
【聲明變數】
變數必須以--
開頭。例如--example-variable: 20px,意思是將20px賦值給--example-varibale變數
可以將聲明變數的語句置於任何元素內,如果要設定全域變數,則可以設定為:root、body或html
:root{ --bgColor:#000;}
變數聲明就像變普通的樣式聲明語句一樣,也可以使用內聯樣式
<body style="--bgColor:#000">
變數聲明語句必須包含一個元素內,而不能隨意放置
//錯誤<style>--bgColor:#000;</style>
【使用變數】
使用var()函數使用變數,並且可以被使用在任意的地方。例如:var(--example-variable)會返回--example-variable所對應的值
<body style="--bgColor:#000;"> <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p> </body>
var()函數還有一個選擇性參數,用來設定預設值,當變數無法取得值時,則使用預設值
<body> <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p> </body>
繼承和層疊
和普通的樣式屬性一樣,變數屬性也支援繼承和層疊。下面樣本中,body元素的變數值為green,p元素的變數值為red; 基於層疊的原理,最終p元素的背景顏色為紅色
<body style="--bgColor:green;"> <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p> </body>
組合和計算
【組合】
CSS 變數可以進行組合使用
<style>.box{ --top:20%; --left:30%; width: 100px; height: 100px; background-image: url(img/24/xiaoshu.jpg); background-position: var(--left) var(--top);}</style><p class="box"></p>
但是,CSS變數不能進行如下形式的組合,var(--color1)var(--color2)不被瀏覽器識別,如果分開,如var(--color1) var(--color2),則被解析為# 333,同樣無法被瀏覽器識別
<style>.box{ --color1:#; --color2:333; width: 100px; height: 100px; background-color: var(--color1)var(--color2);}</style><p class="box"></p>
【計算】
變數和普通樣式值一樣,除了組合,還可以使用calc進行計算
<style>.box{ --borderWidth:2px; width: 100px; height: 100px; background-color:lightblue; border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>
JS
CSS 變數可以和 JS 互相互動。要注意的是,只能使用getPropertyValue()和setProperty()方法,而不能使用style屬性
【style屬性】
<p id="box" style="--color:lightgreen;background-color: var(--color)"></p> <script> var oBox = document.getElementById('box'); console.log(oBox.style['--color']); //undefined</script>
【getPropertyValue()】
<p id="box" style="--color:lightgreen;background-color: var(--color)"></p> <script> var oBox = document.getElementById('box'); console.log(oBox.style.getPropertyValue('--color'));//'lightgreen'</script>
【setProperty()】
<style>#box{ --color:lightgreen; background-color: var(--color); width: 100px; height: 100px; display:inline-block;}</style><button id="btn" type="button">變淺藍</button><p id="box"></p> <script>var oBox = document.getElementById('box');var oBtn = document.getElementById('btn');oBtn.onclick = function(){ oBox.style.setProperty('--color','lightblue');}</script>
不支援
有一點要特別注意的是,變數不支援!important
.box{ --color:red; width: 100px; height: 100px; background-color:--color !important;}</style><p class="box"></p>
chrome瀏覽器如下
用途
1、可維護性
在網頁中維護一個色彩配置或尺寸方案,意味著一些樣式在CSS檔案中多次出現,並被重複使用。當修改方案時,不論是調整某個樣式或完全修改整個方案,都會成為一個複雜的問題,而單純尋找替換是遠遠不夠的,這時CSS變數就派上用場了
:root{ --mainColor:#fc0;}.p1{ color:var(--mainColor);}.p2{ color:var(--mainColor);}
2、語義化
變數的第二個優勢就是名稱本身就包含了語義的資訊。CSS 檔案變得易讀和理解。main-text-color比文檔中的#fc0更容易理解,特別是同樣的顏色出現在不同的檔案中的時候
3、更方便的實現@media媒體查詢
一般地,媒體查詢如下所示
<style>.box{ width: 100px; height: 100px; padding: 20px; margin: 10px; background-color: red}@media screen and (max-width:600px) { .box{ width: 50px; height: 50px; padding: 10px; margin: 5px; }}</style><p class="box"></p>
但是,如果使用變數,則可以精簡代碼
<style>.box{ --base-size:10px; width: calc(var(--base-size) * 10); height: calc(var(--base-size) * 10); padding: calc(var(--base-size) * 2); margin: calc(var(--base-size) * 1); background-color: red;}@media screen and (max-width:600px) { .box{ --base-size:5px; }}</style><p class="box"></p>
以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!