首頁 > web前端 > css教學 > 主體

什麼是CSS變數? CSS變數的學習:CSS變數的繼承&作用域

php是最好的语言
發布: 2018-07-30 14:30:01
原創
1958 人瀏覽過

CSS變數能幫助我們做什麼

在一些命令式程式語言中,像是Java、C 亦然或是JavaScript,透過變數我們能夠追蹤某些狀態。變數是一種符號,關聯著一個特定的值,變數的值能隨著時間的推移而改變。
在像CSS這種宣告式語言中,隨著時間而改變的值並不存在,也就沒有所謂變數的概念了。
CSS 引入了一種層級變數的概念,從而能夠從容應對可維護性的挑戰。這會讓在整個CSS tree 中都可以像徵性的引用一個變數

一、什麼是CSS變數

CSS 變數目前有兩種形式:

##變數,就是擁有合法識別碼和合法的值。可以被使用在任意的地方。可以使用var()函數使用變數。例如:var(--example-variable)會傳回--example-variable所對應的值

自訂屬性。這些屬性使用--
where的特殊格式作為名字。例如--example-variable: 20px;即使一個css宣告語句。意思是將20px賦值給--example-varibale變數

二、變數的宣告

變數的命名
變數宣告使用兩根連接詞線--表示變量, $color是屬於Sass的語法,@color是屬於Less的語法,為避免衝突css原生變數使用--)


注意: 變數名稱大小寫敏感,
--header-color--Header-Color是兩個不同變數

宣告方式
CSS變數宣告的方式非常簡單,如下,宣告了一個名叫color的CSS變數。

  • 在css檔案中寫

  • 寫在html標籤的inline-style裡

  • 用JS給某個元素聲明,方法.style.setProperty

  • body{
      --color: red;
    }
    <body style="--color: red;"></body>
    document.getElementsByTagName(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)
    登入後複製
變數值的類型
如果變數值是一個字串,可以與其他字串拼接

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}
登入後複製

如果變數值是數值,不能與數值單位直接連用,必須使用calc()函數,將它們連接

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}
登入後複製

如果變數值帶有單位,就不能寫成字串

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
登入後複製

注意: 變數值只能用作屬性值,不能用作屬性名

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}
登入後複製

上面程式碼中,變數--side用作屬性名,這是無效的

三、CSS變數的繼承&作用域

自訂屬性同樣支援繼承。一個元素上沒有定義自訂屬性,該自訂屬性的值會繼承其父元素

class="one">
  <p class="two">
    <p class="three">
    </p>
    <p class="four">
    </p>
  <p>
</p>
登入後複製

定義下面的CSS:

.two { --test: 10px; }
.three { --test: 2em; }
登入後複製

在這個範例中,var(--test)的結果是:

  • class="two" 對應的節點: 10px

  • class="three" 對應的節點: element: 2em

  • class="four" 對應的節點: 10px (inherited from its parent)

  • class="one" 對應的節點: 無效值, 即此屬性值為未被自訂css變數覆寫的預設值

最頂層的作用域就是:root

四、回應式

p {
  --color: #7F583F;
  --bg: #F7EFD2;
}

.mediabox {
  color: var(--color);
  background: var(--bg);
}

@media screen and (min-width: 768px) {
  body {
    --color:  #F7EFD2;
    --bg: #7F583F;
  }
}
登入後複製

五、與預處理器的不同

1、預處理器變數不是即時的

$color:#7F583F;

@media screen and (min-width: 768px) {
    $color: #F7EFD2;
}

.mediabox {
      background: $color;
}
登入後複製

編譯結果

.mediabox {
  background: #7F583F; 
}
登入後複製

2、預處理器不能限定作用域

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}
登入後複製

編譯為

ul {
  color: blue; 
}
登入後複製

3、預處理器變數不可互通

原生的CSS自訂屬性可以與任何CSS預處理器或純CSS文件一起使用

六、JS操作變數

CSS 變數可以和JS 互相互動

:root{
  --testMargin:70px;
}
//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;
登入後複製

七、相容性

偵測瀏覽器是否支援CSS自定義屬性的方法

/*css*/

@supports ( (--a: 0)) {
    /* supported */
}

@supports ( not (--a: 0)) {
    /* not supported */
}
// Js

if (window.CSS && window.CSS.supports && window.CSS.supports(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}
登入後複製
總結

相較於傳統的LESS 、SASS 等預處理器變量,CSS 變數的優點在於:

  • CSS 變數的動態性,能在頁面運行時更改,而傳統預處理器變數編譯後無法更改

  • CSS 變數能夠繼承,能夠組合使用,具有作用域

  • 配合Javascript 使用,可以方便的從JS 中讀/寫

#相關文章:

PHP的學習- -可變變量,--可變變量

php 學習日誌- 變量作用域,變量

相關影片:

#極客學院CSS及CSS3影片教學

以上是什麼是CSS變數? CSS變數的學習:CSS變數的繼承&作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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