什麼是CSS變數？ CSS變數的學習：CSS變數的繼承&作用域-css教學-PHP中文網

首頁

web前端

css教學

什麼是CSS變數？ CSS變數的學習：CSS變數的繼承&作用域

php是最好的语言

Jul 30, 2018 pm 02:30 PM

css

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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

動畫粉絲的製作Apr 18, 2025 am 10:35 AM

切換選項卡時，這是您的眼睛首先要尋找的東西。

將您的域與Netlify託管網站一起使用Apr 18, 2025 am 10:34 AM

Netlify有自己的自定義領域文檔，因此，如果您在此內容上尋找馬的技術文檔，則應將其視為

虛擬程式碼Apr 18, 2025 am 10:33 AM

Yonatan Doron不久前就媒體上寫了一篇文章，稱為“代碼藝術 - 為什麼要編寫更多偽代碼”。喜歡這個標題，作為偽代碼的粉絲

讓瑪麗·昆多組織的治療付出艱鉅的任務Apr 18, 2025 am 10:31 AM

我們生活在WebPack和NPM腳本的時代。好是壞，他們帶領捆綁和任務運行，以及一點點滾動，JSPM和GULP。但

從大鴻溝中分支Apr 18, 2025 am 10:27 AM

我喜歡一詞前端開發人員。如果您的擔憂是：

啟動網站的初學者旅程Apr 18, 2025 am 10:20 AM

在2018年9月，我學習Web開發的旅程僅幾個月了。正如我確定的許多新開發人員一樣，這是一項艱鉅的任務

所有新的ES2019技巧和技巧Apr 18, 2025 am 10:19 AM

ES2019中添加了新功能，該標準再次更新了。現在在Node，Chrome，Firefox和Safari中正式提供

用線圈貨幣化（並刪除支持者的廣告）Apr 18, 2025 am 10:13 AM

過去，我過去嘗試過一些基於“小費的微付款”網站。他們來來去去。那很好。從發布者的角度來看，它

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。