Development Guide

变量名命名约定

所有变量按如下方式命名：

@dls-{component}-{part?}-{property}-{variant?}-{status?}-{user-action?}

字段	含义
component	组件名称
part	组件中某个部件的名称
property	变量对应的属性含义（不一定直接映射到 CSS 属性，实现时可以按需采用灵活的方式）
variant	组件的某种预设变体，比如 primary
status	组件数据上的状态，比如 current/selected/read-only/disabled 等
user-action	用户交互的状态，比如 hover/focus/active 等

例如对于：@dls-input-border-color-read-only-hover，解释为 input 组件 read-only 状态下，hover 时的 border-color。

一些已有的约定：

• 当前项用 current 而不用 active，后者用来表示交互状态
• 常见的样式变体：primary/strong/normal/aux/...
• 允许的尺寸变体：xs/s/m/l/xl，支持几种尺寸视组件设计稿而定

测试

组件 token 的测试，请创建两个文件：test/specs/<component-name>/<component-name>.{less,css}。

其中 .less 文件内容如下：

div {
  -dls-component-name-property: @dls-component-name-property;
  // ...more...
}

对应的 .css 文件内容为：

div {
  -dls-component-name-property: 12px;
  // ...more...
}

添加完 test spec 后在项目根目录运行 npm run test 即可。