CSS的變數variable的解析-css教學-PHP中文網

前面的話

基本用法

繼承和層疊

組合與計算

不支援

用途

首頁

web前端

css教學

CSS的變數variable的解析

不言

Jun 12, 2018 pm 03:25 PM

這篇文章主要介紹了關於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(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>

登入後複製

【getPropertyValue()】

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</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(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</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>

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！