【备忘】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