【備忘】CSS3變量引用

CSS3變量引用

使用場景：

當一個css屬性需要在多個地方使用時，這時候用變量引用方式是非常香的，而且很多地方用得着。

例如：

我有10個元素，每個元素都有一個寬度100%的屬性，如果在每個元素上添加一個class，就有點冗餘了，還可以做得更好，那就要用到CSS3的“變量引用”功能。

一般情況

看代碼

<style>
    .test1{
        width:100%;
        border: 1px solid red;
    }
    .test2{
        width:100%;
        margin: 5px;
    }

    .test3{
        width:100%;
        float: left;
    }
</style>

<div class="test1">測試1</div>

<div class="test2">測試2</div>

<div class="test3">測試n多個元素</div>

如果遇到以上情況，每次分別修改test1，test2，test3，乃至更多class，那麼就會很麻煩，因爲改的次數多，而且容易出錯。

爲了解決這個問題，那就要用到CSS3的新屬性“變量引用了”！

使用變量引用情況

看代碼

<style>
    /* 步驟1：定義css3變量 格式必須是--開頭然後跟height屬性，可以把height換成其它可用屬性 */
    :root {
        --width: 220px;
    }

    /* 步驟2：使用變量 */
    .test1{
        /* 注意：記得把 -- 符號加上 */
        width: var(--width);
        border: 1px solid red;
    }

    .test2{
        /* 注意：記得把 -- 符號加上 */
        width: var(--width);
        margin: 5px;
    }

    .test3{
        /* 注意：記得把 -- 符號加上 */
        width: var(--width);
        float: left;
    }
</style>

<div class="test1">測試1</div>

<div class="test2">測試2</div>

<div class="test3">測試n多個元素</div>

平常寫代碼經常會遇到去修改之前寫的代碼，因爲要根據實際情況實時調整樣式。

這樣做的好處是一處修改，刷新頁面後其它地方同時生效，避免了錯誤，還省事。

 

 

END