CSS 变量

目前示例中包含了一个主题编辑器，可以在线实时预览效果。

要想使用 CSS 变量就必须知道某个组件都用到了哪些变量，目前最完善的方式是用 Chrome 开发者工具。

不过如果你不知道如何使用，本文将会介绍一些常用的 CSS 变量，掌握他们也能完成大部分定制工作。

基础颜色

变量 类型 说明
—black 颜色 黑色颜色
—white 颜色 白色颜色
—light 颜色 最浅的颜色
—dark 颜色 最深的颜色
—body-bg 颜色 全局背景色
—background 颜色 table 等背景色
—primary 颜色 主颜色，会影响主按钮颜色
—primary-onHover 颜色 主颜色在鼠标移上去后的颜色
—primary-onActive 颜色 主颜色在激活时的颜色，比如选中
—secondary 颜色 次颜色，比如第二个按钮的颜色
—secondary-onHover 颜色 次颜色在鼠标移上去后的颜色
—secondary-onActive 颜色 次颜色在激活时的颜色
—success 颜色 成功时的颜色
—success-onHover 颜色 在鼠标移上去后的颜色
—success-onActive 颜色 在激活时的颜色
—info 颜色 显示信息的颜色，一般是蓝色
—info-onHover 颜色 在鼠标移上去后的颜色
—info-onActive 颜色 在激活时的颜色
—warning 颜色 警告的颜色
—warning-onHover 颜色 在鼠标移上去后的颜色
—warning-onActive 颜色 在激活时的颜色
—danger 颜色 错误的颜色
—danger-onHover 颜色 在鼠标移上去后的颜色
—danger-onActive 颜色 在激活时的颜色

字体相关

变量 类型 说明
—text-color 颜色 文字颜色
—text—muted-color 颜色 文字置灰时的颜色
—text—loud-color 颜色 一般用于标题文字颜色
—button-color 颜色 按钮文字颜色
—fontFamilyBase 字体家族 基础字体家族
—fontFamilyMonospace 字体家族 等宽字体家族
—fontSizeBase 大小 基础字体大小，默认 14px
—fontSizeMd 大小 中等字体大小
—fontSizeLg 大小 大字体大小
—fontSizeXl 大小 最大字体大小
—fontSizeSm 大小 小字体大小
—fontSizeXs 大小 最小的字体大小
—lineHeightBase 大小 基础行高

边框相关

变量 类型 说明
—borderColor 颜色 边框颜色
—borderRadius 大小 默认边框圆角

链接相关

变量 类型 说明
—link-color 颜色 链接颜色，默认用 —primary
—link-decoration text-decoration 可以控制是否显示下划线
—link-onHover-color 颜色 链接在鼠标移上去之后的颜色
—link-onHover-decoration text-decoration 可以控制鼠标移上去后是否显示下划线

动画

变量 类型 说明
—animation-duration 时长 动画效果时长，默认 0.1s，可以设置为 0 来关闭动画

图片

变量 类型 说明
—Spinner-bg background 加载时的图片 url(‘data:image/…’)