### 步骤
- 从 `variables` 分支创建新的分支，命名规则为`feat/variables-name`，如`feat/variables-btn`
- 组件目录下新增 `_var.scss`文件，里面添加组件变量
- 组件目录下的 `_index.scss` 文件，加入对 `_var.scss`的引入 ，即 `@import "./var";`
- 抽取组件组件变量，并在变量后面添加 `!default` 确保用户自定义内容可以生效
- 组件抽取完毕并检查无误后，提交merge request，审核通过后完成代码合并

### 抽取哪些
组件内的 字号/颜色/圆角/阴影/遮罩/表单高度/表单placeholder。其中颜色又包括：字体颜色/边框颜色/背景颜色，以及个颜色的hover/focus/active/disabled 状态。

除了以上公共的，如果组件自己有些特性，比如不同尺寸的宽度，也需要抽取到组件的变量中。

### 变量命名
`<component>-[type]-[attrtype]-<attr>-[status]`

- component:组件名，如button，
- type: 组件类型，如 button 的支付按钮（btn-pay）
- attrtype: 属性的具体应用场景。如颜色，用于背景（btn-pay-bg）、文本（text）、边框（boder）等
- attr: 属性名称，如color、height、radius等(btn-pay-bg-color)
- status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
如：@button-pay-bg-color-hover
如：@button-pay-height-s

### 其他
对于一些组件内没有设置的属性，比如圆角，因为要抽取公共变量，因此也要将`border-radius`属性写上