全新知識:CSS變數-variable

巴扎黑
發布: 2017-07-19 09:53:02
原創
2363 人瀏覽過

前面的話

  一直以來,CSS中是沒有變數而言的,要使用 CSS 變量,只能藉助 SASS 或 LESS 這類預編譯器。新的草案發布之後,直接在 CSS 中定義和使用變數不再是幻想了。本文將詳細介紹CSS變數variable

 

CSS 變量,顧名思義,也就是由網頁的作者或使用者定義的實體,用來指定文件中的特定變數。

更準確的說法,應該稱為 CSS 自訂屬性 ,不過下文為了好理解都稱為 CSS 變數。

一直以來我們都知道,CSS 中是沒有變數而言的,要使用 CSS 變量,只能藉助 SASS 或 LESS 這類預編譯器。

但是新的草案發布之後,直接在CSS 中定義和使用變數已經不再是幻想了,像下面這樣,看個簡單的例子:

// 宣告一個變數:

:root{

  --bgColor:#000;

##}

   

這裡我們藉助了上篇文章 結構性偽類 中的 :root{ } 偽類,在全域 :root{ } 偽類定義了一個CSS 變量,並取名為 --bgColor 。

定義完了之後則是使用,假設我要設定一個div 的背景色為黑色:

.main{


  background :var(--bgColor);

}

   

這裡,我們在需要使用之前定義變數的地方,透過 var(定義的變數名) 來調用。

基本用法

  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;"><div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    </body>
登入後複製


  var()函數還有一個可選參數,用來設定預設值,當變數無法取得值時,則使用預設值

<body><div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>    </body>
登入後複製


## 

繼承和層疊

  和普通的樣式屬性一樣,變數屬性也支援繼承和層疊。在下列範例中,body元素的變數值為green,div元素的變數值為red; 基於層疊的原理,最終div元素的背景顏色為紅色

<body style="--bgColor:green;"><div style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></div>    </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><div class="box"></div>
登入後複製


#  但是,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><div class="box"></div>
登入後複製

【計算】

  變數和普通樣式值一樣,除了組合,還可以使用calc進行計算
<style>.box{--borderWidth:2px;width: 100px;height: 100px;background-color:lightblue;border-left: calc(var(--borderWidth) * 2) solid black;}</style><div class="box"></div>
登入後複製


 

JS

  CSS 變數可以和JS 互相互動。要注意的是,只能使用getPropertyValue()和setProperty()方法,而不能使用style屬性

【style屬性】
<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <script>  var oBox = document.getElementById('box');
  console.log(oBox.style['--color']);    //undefined</script>
登入後複製

【getPropertyValue()】
<div id="box" style="--color:lightgreen;background-color: var(--color)"></div>    <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><div id="box"></div>    <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><div class="box"></div>
登入後複製

  chrome瀏覽器截圖如下

############################ ######用途######  1、可維護性######  在網頁中維護一個配色方案或尺寸方案,意味著一些樣式在CSS文件中多次出現,並被重複使用。當修改方案時,不論是調整某個樣式或完全修改整個方案,都會成為一個複雜的問題,而單純查找替換是遠遠不夠的,這時CSS變量就派上用場了######
:root{
  --mainColor:#fc0;
}
.div1{
  color:var(--mainColor);
}
.div2{
  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><div class="box"></div>
登入後複製

  但是,如果使用变量,则可以精简代码

<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><div class="box"></div>
登入後複製

 

以上是全新知識:CSS變數-variable的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板