CSS 工具类
Clair 提供了一些 CSS 工具类,让你方便地修改元素样式。这些 CSS 类一般以 .is- 或 .has- 开头。
文本类
文字的颜色和背景颜色,可以参考 颜色。字体大小、行高和对齐方式,请参考 文本样式。
留白设置
你可以使用 CSS 工具类设置一个元素的 margin 或 padding 的值。在 Clair 中,有 6 种规格的留白:
| 规格 | none | xs | sm | md | lg | xl |
|---|---|---|---|---|---|---|
| 实际尺寸 | 0 | 4px | 8px | 16px | 32px | 64px |
在使用时,.has-margin-sm 表示 margin: 8px;而 .has-padding-left-none 表示 padding-left: 0,以此类推。
display 设置
通过 CSS 工具类快捷地设置元素的 display 属性。比如 .is-block 表示 display: block。
| CSS 类 | 具体样式 |
|---|---|
| .is-none | display: none |
| .is-block | display: block |
| .is-inline-block | display: inline-block |
| .is-flex | display: flex |
| .is-inline | display: inline |