CSS 变量
我不喜欢 CSS 变量
我并不觉得在组件库中大量使用 CSS 变量是一个良好的设计。这会阻断我们正常的思维逻辑。
比如您不想显示 <Button> 组件的边框。您自然而然想到的是使用 CSS Style，比如：
<Button style="border-width: 0;">确认</Button>然而，组件设计时，如果将 padding 设计为使用 CSS 变量，上面的写法可能并不是您想要的结果，甚至根本不起作用。此时您可以这样写：
<Button --sunp-border="0">确认</Button>Svelte 会在 <Button> 组件外层包裹一层 <svelte-css-wrapper>。这样做实际上破坏了原本的文档结构，但是 Svelte 又不得不这么做。
<svelte-css-wrapper style="display: contents; --sunp-border: 0px;">
<button>...</button>
</svelte-css-wrapper>您可以内联 style 来避免 <svelte-css-wrapper>。
<Button style="--sunp-border: 0;">确认</Button>所以？
sun-parakeet 在设计组件时，会尽量少地使用 CSS 变量。您需要额外地关注这些 CSS 变量，确保使用它们，而不是直接使用 CSS Style。
使用 CSS 变量的组件
通用
| 组件 | CSS 变量 | 说明 |
|---|---|---|
| Button | --sunp-border | 边框宽度 |
导航
| 组件 | CSS 变量 | 说明 |
|---|---|---|
| SideBar | --sunp-radius | 外侧圆弧半径 |
信息展示
| 组件 | CSS 变量 | 说明 |
|---|---|---|
| Badge | --sunp-top --sunp-right |
徽标中心与顶部/右侧的距离 |
| PageIndicator | --sunp-size ... |
用于从 Swiper 传递 CSS 变量， 以控制指示器样式 |
| Step | --sunp-size | Steps 组件统一设置 Step 图标的尺寸 |
| Swiper | --sunp-padding | 轮播轨道的边距 |
信息录入
| 组件 | CSS 变量 | 说明 |
|---|---|---|
| FormItem | --sunp-label-width | Form 组件统一设置 FormItem 的 label 宽度 |
| Stepper | --sunp-size --sunp-input-width |
按钮尺寸 输入框宽度 |
| Switch | --sunp-width --sunp-height --sunp-checked-color |
最小高度 宽度 打开时的颜色 |