# 样式方案的选择 使用 Sass 作为 CSS 预处理器，这也是 Antd 和 BootStrap 的样式解决方案。 样式文件系统结构： ```js styles/ _variables.scss(各种变量以及可配置设置) _mixins.scss(全局 mixins) _functions.scss(全局 functions) components/ Button. style.scss(组件单独样式) ... ``` # 创建自己组件库的色彩体系 - 系统色板 = 基础色板 + 中性色板 - 产品色板 = 品牌色 + 功能色板 Bootstrap 的色彩体系：  本组件库的色彩体系：  ```css // 中性色彩 $white: #fff !default; // !default 关键字表示定义该变量后其不会被重新赋值 $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5db !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; // 基础色板 $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #fadb14 !default; $green: #52c41a !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; // 系统色板 $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; ``` # 组件库样式变量分类 - 基础色彩系统 - 字体系统 - 表单 - 按钮 - 边框和阴影 - 可配置开关 # Button 组件设计 ## 需求分析  使用时大致的形式： ```js <Button size="lg" type="primary" disabled href=""? className=""? autoFocus=""? ... > Click Me </Button> ```