CSS - 變數

上一頁
下一頁

CSS 變數是自定義屬性，允許您在整個 CSS 程式中儲存和重用值。CSS 變數類似於其他程式語言中的變數。

目錄


 

如何在 CSS 中宣告變數？

CSS 變數通常使用 :root 選擇器定義。以下是宣告 CSS 變數的語法

:root {
    --variable-name: value;
}

要使用 CSS 變數，請遵循以下語法

selector {
    var(--variable-name, fallback-value);
}

選擇器可以是類、ID或標籤。在此瞭解什麼是選擇器。

我們可以使用var函式替換任何元素上 CSS 屬性的值。

CSS 不允許在媒體查詢或容器查詢中使用變數，也不能使用它們來設定 CSS 屬性或選擇器的名稱。

傳統方法

在這個示例中，我們將看到如何在不使用變數的情況下完成顏色和樣式。在這裡，您可以注意到我們正在重複指定屬性值。

示例

<html lang="en">

<head>
    <style>
        body {
            background-color: #f0f0f0;
            color: #333;
            font-family: 'Arial', sans-serif;
            padding: 10px;
        }

        header {
            background-color: #0044cc;
            color: #fff;
            padding: 10px;
        }

        .container {
            background-color: #fff;
            padding: 10px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <div class="container">
        <p>
            This is a container with a background color 
            defined traditionally. Here we need to specify 
            repeating color values multiple times. 
        </p>
    </div>
</body>

</html>

使用 CSS 變數

以下程式碼展示瞭如何使用變數來避免 CSS 中的冗餘。在處理現實世界應用程式中的大型程式碼庫時，這變得更加重要。

在這裡，您還可以看到我們將顏色 '#0044cc' 定義為藍色，因此開發人員可以透過使用變數 blue 來重複使用此顏色。

示例

<html lang="en">

<head>
    <style>
        :root {
            --main-bg-color: #f0f0f0;
            --main-text-color: #333;
            --primary-font: 'Arial', sans-serif;
            --padding: 10px;
            --blue: #0044cc;
            --header-text: #fff;
            --container-bg: #fff;
        }
        
        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
            font-family: var(--primary-font);
            padding: var(--padding);
        }
        
        header {
            background-color: var(--blue);
            color: var(--header-text);
            padding: var(--padding);
        }
        
        .container {
            background-color: var(--container-bg);
            padding: var(--padding);
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <div class="container">
        <p>
            This is a container with a background color 
            defined using variables.
        </p>
    </div>
</body>

</html>

根偽類

CSS 變數在樣式表的頂部使用:root偽類宣告，該偽類匹配文件的根元素。這意味著使用:root選擇器宣告的 CSS 變數可以被文件中的任何元素使用。

CSS 變數名稱區分大小寫，這意味著 --pink-color 和 --Pink-color 是兩個不同的變數。

步驟 1：定義自定義屬性

要使用 :root 偽類宣告變數，只需在變數名稱前新增'--'字首，然後設定其值。

:root {
   --pink-color: pink;
   --blue-color: blue;
}

步驟 2：在 CSS 中使用自定義屬性

然後可以使用var()函式在整個 CSS 程式碼中使用這些變數。

.box {
   width: 400px;
   height: 200px;
   background-color: var(--pink-color);
   color: var(--blue-color);
}
.box1, .box2 {
   display: inline-block;
   background-color: var(--pink-color);
   width: 100px;
   height: 50px;
   color: var(--blue-color);
}

示例

以下示例展示瞭如何在十六進位制和 RGB 值中定義我們自己的顏色陰影變體，將其儲存在變數中並在以後重用。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;
            --black-color: rgb(0, 0, 21);
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color);
            color: var(--black-color);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            color: var(--white-color);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

自定義屬性的繼承

您可以使用 CSS 變數定義可重用的 CSS 值，這些值可以由子元素繼承。

步驟 1：在:root選擇器中宣告自定義屬性。

這使變數全域性化，並可供文件中的所有元素訪問。

:root {
   --pink-color: pink;
}

步驟 2：使用var()函式在 CSS 中訪問自定義屬性。

這允許您在 box 的所有子元素中重用自定義屬性。

.box {
   --box-background: var(--pink-color);
   background-color: var(--box-background);
}

步驟 3：在子元素中使用顏色。

這允許您為特定元素自定義自定義屬性的值。

.box1, .box2 {
   background-color: var(--box-background);
}

示例

以下示例演示瞭如何將 CSS 自定義屬性與繼承一起使用。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;
            --black-color: rgb(0, 0, 21);
        }
        .box {
            --box-background: var(--white-color);
            background-color: var(--box-background);
            text-align: center;
            padding: 20px;
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            /* Box Background is defined at parent box */
            color: var(--box-background);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

CSS 變量回退值

您可以將 CSS 變數與回退值一起使用，以確保您的 CSS 程式碼仍然有效並在變數未定義的情況下也能工作。

CSS 回退值不用於使 CSS 自定義屬性在舊版瀏覽器中工作。它們僅在支援 CSS 自定義屬性的瀏覽器中用作備份，以防變數未定義或具有無效值。

示例

在下面的示例中，我們只為白色定義了顏色陰影，但也在使用黑色變數。由於我們為黑色變數定義了回退值，因此不會出現任何錯誤。

<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;/* Shade for white */
            /* variable for black not defined */
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color, white);
            color: var(--black-color, black);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color, black);
            color: var(--white-color, white);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

CSS 變數無效值

在下面的示例中，--red-color自定義屬性的值定義為15px。這是一個無效的值，因為紅色屬性僅接受顏色值。

但是，瀏覽器將無法解析自定義屬性的值，因為它無效。結果，它將簡單地忽略 CSS 規則，第二個 h2 元素中的文字將保持相同的顏色。

示例

在這個示例中，即使我們使用 color 屬性將 h2 的顏色設定為紅色，但由於無效顏色引起的錯誤，使用了預設顏色黑色。

<html>

<head>
    <style>
    :root {
        /* define a invalid value for c0lor */
        --red-color: 15px;
    }
    h2 {
        /* Make color of h2 as red */
        color: red;
    }
    h2 {
        /* Use invalid color for h2, this will cause error
          and default color value (black) is used */
        color: var(--red-color);
    }
    </style>
</head>

<body>
    <h2>
        Tutorialspoint CSS Variables.
    </h2>
</body>

</html>

JavaScript 中的 CSS 變數

以下示例演示瞭如何使用 JavaScript 全域性和本地設定 CSS 變數。

示例

<html>
<head>
    <style>
        .box {
            text-align: center;
            padding: var(--padding);
            background-color: var(--white-color);
            color: var(--black-color);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            color: var(--white-color);
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p>How to code a website using HTML and CSS</p>
        <div class="box1">HTML</div>
        <div class="box2">CSS</div>
    </div>

    <script>
        const root = document.documentElement;
        const boxElement = document.querySelector('.box');

        // Define a global variable
        root.style.setProperty('--padding', '20px');

        // Define variables specific to the box element
        boxElement.style.setProperty('--white-color', '#f0f0f0');
        boxElement.style.setProperty('--black-color', 'rgb(0, 0, 21)');
    </script>
</body>
</html>
列印頁面
上一頁
下一頁
廣告