CSS Variable詳解

CSS Variable，也叫CSS自定義屬性，是CSS3的一項新特性，可以將值保存在一個名稱中，然後在整個文檔中重複使用該名稱。它提供了一種更為靈活的CSS編程方式，讓我們能夠輕鬆地維護顏色、字體、間距等信息。本文將從多個方面對CSS Variable做詳細的闡述。

一、變數的聲明

要使用CSS變數，需要使用兩個中括弧定義變數名稱。變數名稱可以使用字母、數字、連接符和下劃線進行任意組合。例如，要聲明一個變數，可以用以下代碼：

    :root {
        --primary-color: #007bff;
    }

其中，:root表示整個文檔的根元素，–primary-color為變數名稱，#007bff為變數值。可以根據需要在同一級聲明多個變數。

二、變數的使用

使用CSS變數，可以通過var()函數來獲取定義在文檔中的值。例如，要使用上述定義的primary-color變數，可以用以下代碼：

    body {
        color: var(--primary-color);
    }

通過var()函數引用變數，可以在多個元素中重複使用同一副代碼，減少冗餘代碼，提高開發效率。

三、變數的繼承

CSS變數支持繼承，也就是說，如果某個元素未定義某個變數，它會從它的父級元素中繼承該變數的值。例如：

    :root {
        --primary-color: #007bff;
    }
    header {
        --text-color: #fff;
    }
    main {
        --text-color: #000;
    }
    header h1 {
        color: var(--text-color);
    }
    main p {
        color: var(--text-color);
    }

在上面的代碼中，header元素和main元素定義了不同的text-color變數。在header元素中使用text-color變數時，它將使用定義在header中的值。在main元素中使用時，它將使用定義在main中的值。但是，如果頭元素位於主元素之內，則h1元素將繼承–text-color的值「#ffffff」。

四、變數的值計算

CSS變數還支持變數值計算。也就是說，可以在變數中使用數學運算符進行計算。例如：

    :root {
        --width: 50px;
    }
    .box {
        width: calc(var(--width) * 4);
    }

在上述代碼中，.box類的寬度將為200px。

五、變數的作用域

CSS變數的作用域只限於聲明該變數的規則集以及父規則集，不會影響其他規則集。例如：

    :root {
        --width: 50px;
    }
    .box1 {
        --width: 100px;
    }
    .box2 {
        width: var(--width);
    }

在上述代碼中，box2元素的寬度仍然是50px，因為它沒有訪問box1規則集中定義的–width 變數值。

六、變數的應用實例

CSS變數可以用於多種用例，例如：

1.定製主題色

    :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
    }
    .button-primary {
        background-color: var(--primary-color);
    }
    .button-secondary {
        background-color: var(--secondary-color);
    }

通過定義–primary-color和–secondary-color變數，可以讓按鈕輕鬆地保持一致的顏色風格。

2.動態文本注入

    
 
    
        [data-text]:before {
            content: attr(data-text);
            color: var(--primary-color);
        }
    

使用CSS變數，可以讓動態文本注入變得更加簡單。例如，在上面的代碼中，使用[data-text]選擇器將”data-text”特性添加到段落標記上。然後，使用:before偽元素將數據屬性注入元素。

3.布局調整

使用CSS變數可以在多個頁面或項目中輕鬆重用樣式屬性。例如預定義頁面元素的樣式，可以使用以下代碼：

    :root {
        --sidebar-width: 200px;
        --header-height: 50px;
    }
    .sidebar {
        width: var(--sidebar-width);
        height: calc(100vh - var(--header-height));
    }
    .header {
        height: var(--header-height);
    }

4.響應式設計

使用CSS變數可以輕鬆調整響應式設計元素的響應方式。例如，可以像下面這樣定義一個通用的屏幕尺寸變數：

    :root {
        --screen-lg: 992px;
    }
    @media (min-width: var(--screen-lg)) {
        .container {
            max-width: 960px;
        }
    }

在上面的代碼中，使用CSS變數，可以輕鬆調整屏幕尺寸的響應方式。在上述示例中，當瀏覽器窗口寬度大於992px時，.container類將使用960px的最大寬度。

總結

CSS Variable是CSS3的新特性，通過聲明變數、引用變數、繼承變數、使用變數計算和控制變數作用域等諸多特性，可以在開發中大幅優化代碼結構、提高開發效率、降低維護成本。