纷享销客开发者手册

简体中文

English

CSS 变量系统

约 2033 字大约 7 分钟

2026-06-25

简介

CSS 变量系统提供了一套完整的设计规范，包括颜色系统、字体规范和常用样式类，确保整个应用的视觉一致性。

使用场景

  • 统一的颜色规范管理
  • 标准化的字体样式
  • 响应式的主题切换
  • 组件样式的统一性
  • 设计系统的实现

使用方法

局部引入，在需要引入的页面或组件的index.wxss中配置。

@import "/miniprogram_npm/ava-ui/fxui/common_css/var.wxss";

Figma 设计稿到代码转换

颜色变量转换规则

Figma: Primary/06    →    CSS: var(--color-primary06)
Figma: Success/01    →    CSS: var(--color-success01)
Figma: Neutrals/19   →    CSS: var(--color-neutrals19)

字体样式转换规则

Figma: Text/14       →    CSS: .text-14
Figma: Text/16/Bold  →    CSS: .text-16_B
Figma: Text/18/Medium →   CSS: .text-18_M

转换示例

/* Figma 设计稿标注：Primary/06 背景，Neutrals/01 文字，Text/16/Medium */
.my-button {
  background-color: var(--color-primary06);
  color: var(--color-neutrals01);
}

.my-button-text {
  /* 使用字体类 */
  @extend .text-16_M;
  /* 或者直接应用到元素 */
}
<!-- 在 WXML 中直接使用字体类 -->
<view class="my-button">
  <text class="text-16_M">按钮文字</text>
</view>

在 WXSS 中使用颜色变量

.my-component {
  background-color: var(--color-primary06);
  color: var(--color-neutrals01);
  border: 1px solid var(--color-neutrals04);
}

.my-text {
  color: var(--firstlevel);
}

在 WXML 中使用字体类

<view class="text-16-1">这是一级标题文字</view>
<view class="text-14-2">这是二级正文文字</view>
<view class="text-12_M">这是中等字重的小字</view>

RGB 变量的使用

.my-component {
  background-color: rgba(var(--color-primary06-rgb), 0.1);
  box-shadow: 0 2px 8px rgba(var(--color-neutrals19-rgb), 0.15);
}

代码演示

API

颜色变量

主题色（Primary）

变量名色值说明
--color-primary01#FFF7E6主题色最浅
--color-primary02#FFDDA3主题色浅
--color-primary03#FFCA7A主题色较浅
--color-primary04#FFB452主题色中浅
--color-primary05#FF9B29主题色中
--color-primary06#FF8000主题色标准（默认）
--color-primary07#D96500主题色中深
--color-primary08#B34D00主题色较深
--color-primary09#8C3800主题色深
--color-primary10#662500主题色最深

成功色（Success）

变量名色值说明
--color-success01#f0fff4成功色最浅
--color-success02#dcfae6成功色浅
--color-success03#abedc3成功色较浅
--color-success04#7ee0a5成功色中浅
--color-success05#55d48c成功色中
--color-success06#30c776成功色标准
--color-success07#1fa160成功色中深
--color-success08#117a49成功色较深
--color-success09#085433成功色深
--color-success10#042e1d成功色最深

警告色（Warning）

变量名色值说明
--color-warning01#fff5e6警告色最浅
--color-warning02#ffe2bd警告色浅
--color-warning03#ffcd94警告色较浅
--color-warning04#ffb56b警告色中浅
--color-warning05#ff9a42警告色中
--color-warning06#ff7c19警告色标准
--color-warning07#d95d0b警告色中深
--color-warning08#b34100警告色较深
--color-warning09#8c2f00警告色深
--color-warning10#661f00警告色最深

危险色（Danger）

变量名色值说明
--color-danger01#fff5f0危险色最浅
--color-danger02#ffdccc危险色浅
--color-danger03#ffbda3危险色较浅
--color-danger04#ff9c7a危险色中浅
--color-danger05#ff7752危险色中
--color-danger06#ff522a危险色标准
--color-danger07#d93518危险色中深
--color-danger08#b31e0b危险色较深
--color-danger09#8c0d01危险色深
--color-danger10#660500危险色最深

信息色（Info）

变量名色值说明
--color-info01#e6f4ff信息色最浅
--color-info02#b0daff信息色浅
--color-info03#87c3ff信息色较浅
--color-info04#5ea9ff信息色中浅
--color-info05#368dff信息色中
--color-info06#0c6cff信息色标准
--color-info07#004fd9信息色中深
--color-info08#003bb3信息色较深
--color-info09#002a8c信息色深
--color-info10#001b66信息色最深

中性色（Neutrals）

变量名色值说明
--color-neutrals01#ffffff纯白
--color-neutrals02#fafafa背景色最浅
--color-neutrals03#f2f3f5背景色浅
--color-neutrals04#eaebee边框色浅
--color-neutrals05#dee1e8分割线色
--color-neutrals06#ced1d9中性色浅
--color-neutrals07#c1c5ce禁用色
--color-neutrals08#adb1ba中性色中浅
--color-neutrals09#a3a7b0中性色中
--color-neutrals10#999da6中性色中深
--color-neutrals11#91959e占位符色
--color-neutrals12#80858f中性色较深
--color-neutrals13#737881中性色深
--color-neutrals14#606570中性色更深
--color-neutrals15#545861二级文字
--color-neutrals16#444852中性色最深
--color-neutrals17#343841中性色极深
--color-neutrals18#272b34中性色超深
--color-neutrals19#181c25一级文字

特殊色（Special）

变量名色值说明
--color-special01#f2f4fb特殊背景色
--color-special02#737c8c特殊文字色

语义化颜色变量

传统变量（兼容性）

变量名对应新变量说明
--main--color-primary06主题色
--main-disable--color-primary03主题禁用色
--link--color-info06链接色
--hover#F86800悬停色
--error--color-danger06错误色
--error-disable#F37171错误禁用色
--success--color-success06成功色
--firstlevel--color-neutrals19一级文字
--secondlevel--color-neutrals15二级文字
--thirdlevel--color-neutrals11三级文字
--fourthlevel--color-neutrals07四级文字
--disable--color-neutrals11禁用文字
--placeholder--color-neutrals07占位文字
--background#F3F5F8app背景色
--border#E8E8E8边框色
--line#E8E8E8分割线色

主题按钮色

变量名对应变量说明
--theme-btn-normal--color-primary06按钮默认状态
--theme-btn-click--color-primary07按钮点击状态
--theme-btn-disabled--color-primary03按钮禁用状态
--theme-background--color-primary01主题背景色

字体样式类

标准字体类（带颜色层级）

类名字号行高颜色层级说明
.text-18-118px28px一级文字大标题
.text-18-218px28px二级文字大标题次要
.text-18-318px28px三级文字大标题辅助
.text-18-418px28px四级文字大标题禁用
.text-16-116px24px一级文字中标题
.text-16-216px24px二级文字中标题次要
.text-16-316px24px三级文字中标题辅助
.text-16-416px24px四级文字中标题禁用
.text-14-114px18px一级文字小标题
.text-14-214px18px二级文字小标题次要
.text-14-314px18px三级文字小标题辅助
.text-14-414px18px四级文字小标题禁用

字体规格类（不含颜色）

Figma变量类名字号行高字重
Caption2.text-1010px14pxnormal
Caption2-M.text-10_M10px14pxmedium
Caption2-B.text-10_B10px14pxbold
Caption1.text-1111px14pxnormal
Caption1-M.text-11_M11px14pxmedium
Caption1-B.text-11_B11px14pxbold
Foot Note.text-1212px18pxnormal
Foot Note-M.text-12_M12px18pxmedium
Foot Note-B.text-12_B12px18pxbold
Body2.text-1313px18pxnormal
Body2-M.text-13_M13px18pxmedium
Body2-B.text-13_B13px18pxbold
Body1.text-1414px20pxnormal
Body1-M.text-14_M14px20pxmedium
Body1-B.text-14_B14px20pxbold
Title2.text-1515px24pxnormal
Title2-M.text-15_M15px24pxmedium
Title2-B.text-15_B15px24pxbold
Title1.text-1616px24pxnormal
Title1-M.text-16_M16px24pxmedium
Title1-B.text-16_B16px24pxbold
Large Title.text-1818px28pxnormal
Large Title-M.text-18_M18px28pxmedium
Large Title-B.text-18_B18px28pxbold
Nav Title.text-2020px30pxnormal
Nav Title-M.text-20_M20px30pxmedium
Nav Title-B.text-20_B20px30pxbold
22.text-2222px30pxnormal
22-M.text-22_M22px30pxmedium
22-B.text-22_B22px30pxbold
BI Title.text-28_B28px32pxbold

字重变体

每个字号都提供三种字重变体：

  • 无后缀：normal 字重（如 .text-14）
  • _M 后缀：medium 字重（如 .text-14_M）
  • _B 后缀：bold 字重（如 .text-14_B）

设计说明

Figma 设计规范

  • 字体规范：严格遵循 Figma 字体规范
  • 颜色规范：与 Figma 设计稿中的颜色变量保持一致
  • 命名规范：CSS 变量命名直接对应 Figma 变量，便于设计师和开发者协作
  • 版本同步：CSS 变量系统与 Figma 设计系统保持同步更新

颜色系统设计原则

  • 层次化：每种颜色提供 01-10 共 10 个层级，满足不同场景需求
  • 语义化：颜色命名具有明确的语义，便于理解和使用
  • 一致性：所有颜色都遵循统一的命名规范和色彩理论
  • 可扩展：支持主题切换和自定义颜色方案

字体规范设计原则

  • 标准化：提供标准的字号、行高和字重组合
  • 层次化：通过颜色层级区分文字的重要程度
  • 灵活性：支持带颜色和不带颜色两种使用方式
  • 响应式：适配不同屏幕尺寸和设备

兼容性说明

  • 保留传统变量名，确保向后兼容
  • 新项目推荐使用新的颜色变量系统
  • 支持渐进式迁移，新旧变量可以并存使用

预览

打开预览