自定义变量

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

变量定义

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

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

<div class="brand">三眼鸭的编程教室</div>
<div class="slogo">帮助每一个学编程的人</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;
    }

    .slogo {
        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="slogo">帮助每一个学编程的人</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;
}

.slogo {
    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>

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

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

p {
    font-weight: bold;

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

</style> $$

$$tip

对于全局的变量,一般会将其设置到 :rootbody 之中。

$$

备用值

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

<div class="brand">三眼鸭的编程教室</div>
<div class="slogo">帮助每一个学编程的人</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;
    }

    .slogo {
        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="slogo">帮助每一个学编程的人</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;
}

.slogo {
    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> $$

使用自定义变量的好处

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