自定义变量

很多时候多个样式属性会是同一个值，最经典的场景就是网站的主题色。这时候通过变量就可以定义一个属性值，并被多个地方使用。

变量定义

变量的定义以双横线开头，比如： --primary-color: #10807f 。

应用变量时需要放在 var 中，比如： color: var(--primary-color) 。

<div class="brand">三眼鸭的编程教室</div>
<div class="slogan">帮助每一个学编程的人</div>
<button class="join">加入学习</button>

<style>
    :root {
        --primary-color: #10807f;
    }

    .brand {
        width: max-content;
        padding: 20px 30px;

        font-size: 28px;
        font-weight: bold;

        color: var(--primary-color);

        background-color: #eee;

        margin: 20px 0;
    }

    .slogan {
        width: max-content;
        padding: 20px 30px;

        font-weight: bold;
        color: white;

        background-color: var(--primary-color);

        margin: 20px 0;
    }

    .join {
        padding: 10px 20px;

        font-weight: bold;
        color: white;

        outline: none;
        border: none;

        border-radius: 8px;

        background-color: var(--primary-color);

        margin: 20px 0;

        cursor: pointer;
    }
</style>

$$demo <div class="brand">三眼鸭的编程教室</div> <div class="slogan">帮助每一个学编程的人</div> <button class="join">加入学习</button>

.brand {
    width: max-content;
    padding: 20px 30px;

    font-size: 28px;
    font-weight: bold;

    color: var(--primary-color);

    background-color: #eee;

    margin: 20px 0;
}

.slogan {
    width: max-content;
    padding: 20px 30px;

    font-weight: bold;
    color: white;

    background-color: var(--primary-color);

    margin: 20px 0;
}

.join {
    padding: 10px 20px;

    font-weight: bold;
    color: white;

    outline: none;
    border: none;

    border-radius: 8px;

    background-color: var(--primary-color);

    margin: 20px 0;

    cursor: pointer;
}

</style> $$

继承性

定义的变量会被其后代继承，这同时意味着：

如果未继承到变量，则使用其变量无效
继承的变量可以被覆盖

<div class="teal-box">
    <p>继承到变量</p>
    <div class="red-box">
        <p>变量被覆盖</p>
    </div>
</div>
<p>未继承到变量</p>

<style>
    .teal-box {
        --primary-color: teal;
    }

    .red-box {
        --primary-color: red;
    }

    p {
        font-weight: bold;

        color: var(--primary-color);
    }
</style>

$$demo <div class="teal-box"> <p>继承到变量</p> <div class="red-box"> <p>变量被覆盖</p> </div> </div> <p>未继承到变量</p>

.red-box {
    --primary-color: red;
}

p {
    font-weight: bold;

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

</style> $$

$$tip

对于全局的变量，一般会将其设置到 :root 或 body 之中。

备用值

我们可以使用一个备用值，当指定的变量未定义时使用。

<div class="brand">三眼鸭的编程教室</div>
<div class="slogan">帮助每一个学编程的人</div>
<button class="join">加入学习</button>

<style>
    :root {
        /* 假设未定义 */
        /* --primary-color: #10807f; */
    }

    .brand {
        width: max-content;
        padding: 20px 30px;

        font-size: 28px;
        font-weight: bold;

        /* 没指定备用值 */
        /* 使用初始或继承的值 */
        color: var(--primary-color);

        background-color: #eee;

        margin: 20px 0;
    }

    .slogan {
        width: max-content;
        padding: 20px 30px;

        font-weight: bold;
        color: white;

        /* 使用了 pink 备用值 */
        background-color: var(--primary-color, pink);

        margin: 20px 0;
    }

    .join {
        padding: 10px 20px;

        font-weight: bold;
        color: white;

        outline: none;
        border: none;

        border-radius: 8px;

        /* 使用了 pink 备用值 */
        background-color: var(--primary-color, pink);

        margin: 20px 0;

        cursor: pointer;
    }
</style>

$$demo <div class="brand">三眼鸭的编程教室</div> <div class="slogan">帮助每一个学编程的人</div> <button class="join">加入学习</button>

.brand {
    width: max-content;
    padding: 20px 30px;

    font-size: 28px;
    font-weight: bold;

    /* 没指定备用值 */
    /* 使用初始或继承的值 */
    color: var(--primary-color);

    background-color: #eee;

    margin: 20px 0;
}

.slogan {
    width: max-content;
    padding: 20px 30px;

    font-weight: bold;
    color: white;

    /* 使用了 pink 备用值 */
    background-color: var(--primary-color, pink);

    margin: 20px 0;
}

.join {
    padding: 10px 20px;

    font-weight: bold;
    color: white;

    outline: none;
    border: none;

    border-radius: 8px;

    /* 使用了 pink 备用值 */
    background-color: var(--primary-color, pink);

    margin: 20px 0;

    cursor: pointer;
}

</style> $$

使用自定义变量的好处

一处定义，多处使用。不用担心不小心写错了值。
一处修改，多处生效。再也不用翻各个代码文件去修改值了。
使用变量可以实现主题色切换等高级效果。