前端知识点

配色方案

本页目录

var() ​

使用场景 ​

我目前会使用其定义一些全局主题色，例如 var(--theme-color, red, blue)，如果不存在该变量则会使用后面的值。一般会配合 :root 标签一起使用。

示例：

CSS
:root {
    --theme-color: #aaa;
    --theme-color-light: #bbb;
}

.main {
    color: var(--theme-color, var(--theme-color-light, #ccc)); /* 支持嵌套 */
}
:root {
    --theme-color: #aaa;
    --theme-color-light: #bbb;
}

.main {
    color: var(--theme-color, var(--theme-color-light, #ccc)); /* 支持嵌套 */
}

题外话 ​

我目前在微信小程序原生项目中使用，当前开发者工具虽然支持了 scss 语法，但不支持设置全局样式，即 app.scss 设置变量不会在全局生效，所以我在全局会使用 var() 语法设置主题色。

currentColor 值 ​

这也是个 CSS3 新增的颜色值，在写组件的时候很实用，比如我们需要实现一个白色背景，边框与字体颜色一样的按钮：

HTML
<button class="var-btn"> button </button>
<button class="var-btn"> button </button>
CSS
.var-btn {
    width: 100px;
    height: 36px;
    color: red;
    border: 1px solid currentColor; /* currentColor 会与 color 一致，改变时只需要设置 color 即可 */
    border-radius: 5px;
    background-color: #fff;
}
.var-btn {
    width: 100px;
    height: 36px;
    color: red;
    border: 1px solid currentColor; /* currentColor 会与 color 一致，改变时只需要设置 color 即可 */
    border-radius: 5px;
    background-color: #fff;
}