CSS custom properties (variables)

Posted on Edited on In Views: Disqus:

 

宣告一 CSS 變數的語法為

element {
  --main-bg-color: brown;
}

 

使用一 CSS 變數的語法為

element {
  background-color: var(--main-bg-color);
}


範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        :root {
            --color-red: red;
            --color-yellow: yellow;
        }

        h1 {
            --color-blue: blue;
            --color-green: green;
        }

        .test {
            /*no effect*/
            --color-pink: pink;
            --color-orange: orange;
        }

        .root-yellow {
            background-color: var(--color-yellow);
        }

        .h1-blue {
            background-color: var(--color-blue);
        }

        .test-span {
            background-color: var(--color-pink);
        }
    </style>
</head>
<body>
    <p class="root-yellow">sdfsdf</p>
    <p class="h1-blue">sdfsdf</p>
    <h1 class="h1-blue">fdf</h1>
    <h2 class="h1-blue">aaa</h2>
    <h2 class="test-span">bbb</h2>
</body>
</html>

 

說明：

1、CSS 變數的宣告不能放在 class 裡，否則無作用。

2、由於 CSS 變數的宣告某種程度具有封閉性，不同元素裡的變數宣告不能跨區使用。

3、IE11 以下不支援。

 

參考資料：

Using CSS custom properties (variables)

CSS Custom Properties for Cascading Variables Module Level 1