---
order: 30
title:
  en-US: Style
  zh-CN: 样式
type: Dev
---

这篇文档主要针对如何在项目中使用和规划样式文件进行介绍，如果想获取基础的 CSS 知识或查阅属性，可以参考 [MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)。

## less

ng-alain 默认使用 less 作为样式语言，建议在使用前或者遇到疑问时学习一下 [less](http://lesscss.org/) 的相关特性。

## 组件样式

在组件样式开发过程中，你可以通过 *src/styles/index.less* 创建全局样式，或利用组件的 `styles` 属性创建样式。

对于全局样式，有两个问题比较突出：

- 全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据 build 后生成文件中的先后顺序，后面的样式会将前面的覆盖；
- 选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标识，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越多。

因此，除非设计师明确需求以外，我们应该尽可能使用组件 `styles` 属性创建组件样式，有关如何Angular样式请参考《[关于Angular样式封装](https://zhuanlan.zhihu.com/p/31235358)》。

## 样式文件类别

在一个项目中，样式文件根据功能不同，可以划分为不同的类别。

### src/styles/index.less

全局样式文件，在这里你可以进行一些通用设置。

> 因为 antd 中会自带一些全局设置，如字号，颜色，行高等，所以在这里，你只需要关注自己的个性化需求即可，不用进行大量的 reset。

### src/styles/theme.less

脚手架的[主题系统](/docs/theme)有几十种参数，你可以在这里重置变量值来改变主题系统外观，例如改变内容区域背景：

```less
@content-bg:  #fff;
```

更多细节了解[主题系统](/docs/theme)。

## 工具类规则

ng-alain 在 Ant Design 的基础上生产一套尺寸、间距、颜色等工具类。

### 尺寸

我认为这些工具类只会运用在内容区域，因此，按 Ant Design 的规范，尺寸的宽度是以一个 `8px` Gutter 基础间距为基础；并衍生出三个尺寸，分别为：

| 名称 | 公式 | 尺寸 | 说明 |
| ---- | --- | --- | --- |
| `sm` | $gutter | 8px | 小号 |
| `md` | $gutter * 2 | 16px | 中号 |
| `lg` | $gutter * 3 | 24px | 大号 |

依这些尺寸规则，衍生出尺寸微调整的类，这些类包括 `margin`、`padding`，其命名规则如下。

类型包括：`padding`、`margin`。

方向包括：`top`、`right`、`bottom`、`left`、`x`（`left`、`right`）、`y`（`top`、`bottom`）；方向为可选。

**消除**

```regex
[<类型>p|m][<方向>t|r|b|l|x|y]?0
```

**基础**

```regex
[<类型>p|m][<方向>t|r|b|l|x|y]?-[<尺寸>sm|md|lg]
```

示例：

```css
.p-sm { padding: 8px !important; }
.pt-sm { padding-top: 8px !important; }
.m-sm { margin: 16px !important; }
.mt-md { margin-top: 16px !important; }

.p0 { padding: 0 !important; }
```

### 色彩

Ant Design 并没有按钮色这一说，而是以视觉效果为基准。`nz-button` 包括四种类型：`primary`、`dashed` 等。但 `primary` 是固定的蓝色系列，这是默认色系。

而 ng-alain 依然不会破坏这种规则，但依 [色彩](//ant.design/docs/spec/colors-cn) 章节，我产生了一种运用于文本、背景的色系类。

色彩一共有十种，前九种依[色彩](//ant.design/docs/spec/colors-cn)为准，以及新增一种 `teal【#20c997】` （别问我为什么，我就喜欢偶数而已），分别如下：

| 名称 | 基本色 | 说明 |
| ---- | --- | --- |
| `red` | `#f04134` | 热情、警示 |
| `green` | `#00a854` | 成功、通过、安全 |
| `blue` | `#108ee9` | 专业、科技 |
| `pink` | `#f5317f` | 典雅、明快、女性 |
| `orange` | `#f56a00` | 醒目、温暖 |
| `purple` | `#7265e6` | 高雅、浪漫 |
| `yellow` | `#ffbf00` | 活力、提示 |
| `cyan` | `#00a2ae` | 清新、冷静、结构化 |
| `grey` | `#bfbfbf` | 平稳、中性 |
| `teal` | `#20c997` |  |

这些色彩会衍生出 10 种渐变色，然而每一种渐变色要想产生一个有效的命名（10 * 10）非常困难。因此，我只衍生三种颜色规则，分别为：

| 名称 | 色号 |
| ---- | --- |
| `light` | 5号 |
| `normal` | 6号 |
| `dark` | 7号 |

然后依以下规则产生：

类型包括：`text`、`background-color`、`background-color:hover`。

```regex
[<类型>text|bg]-[<色彩名>red|green|blue|pink|orange|purple|yellow|cyan|teal|grey](-[light|dark])?(-h)?
```

*`normal` 本身即是基本色，所以实际无须加上 normal*

> `grey` 可能会更常用，因此，除了 `grey-light`、`grey-dark` 额外增加了 `grey-lighter`、`grey-darker` 表示更浅深度。

示例：

```less
// Text color
.text-red-light { color: #fabeb9 !important; }
.text-red { color: #f04134 !important; }
.text-red-dark { color: #a31837 !important; }

// background-color color
.bg-red-light { background-color: #fabeb9 !important; }
.bg-red { background-color: #f04134 !important; }
.bg-red-dark { background-color: #a31837 !important; }

// hover color
.bg-red-light-h { &:hover { background-color: #fabeb9 !important; } }
.bg-red-h { &:hover { background-color: #f04134 !important; } }
.bg-red-dark-h { &:hover { background-color: #a31837 !important; } }
```

#### 别名

实际上 Ant Design 提供一套类似 bootstrap 的命名方式的别名规则。只是，我们无法使用到这里内置的而已，这些别名包括：

| 别名 | 色系 |
| ---- | --- |
| `primary` | `blue` |
| `success` | `green` |
| `error` | `red` |
| `warning` | `yellow` |

进而，我将取转化成文本与背景，其命名规则同上面一样，只是将色彩名变成为别名而已。

示例：

```less
// Text color
.text-error-light { color: #fabeb9 !important; }
.text-error { color: #f04134 !important; }
.text-error-dark { color: #a31837 !important; }

// background-color color
.bg-error-light { background-color: #fabeb9 !important; }
.bg-error { background-color: #f04134 !important; }
.bg-error-dark { background-color: #a31837 !important; }

// hover color
.bg-error-light-h { &:hover { background-color: #fabeb9 !important; } }
.bg-error-h { &:hover { background-color: #f04134 !important; } }
.bg-error-dark-h { &:hover { background-color: #a31837 !important; } }
```

#### 全量颜色

包含10*10=100种颜色面板，具体效果参见 [color page](//cipchk.github.io/ng-alain/#/elements/colors)。

### Clearfix

`ng-zoroo-antd` 自带清除浮动 `.clearfix`。

### Display

| 别名 | CSS |
| ---- | --- |
| `d-none` | `display: none` |
| `d-block` | `display: block` |
| `d-inline-block` | `display: inline-block` |
| `d-flex` | `display: flex` |
| `d-inline-flex` | `display: inline-flex` |
| `justify-content-start` | `justify-content: flex-start` |
| `justify-content-end` | `justify-content: flex-end` |
| `justify-content-center` | `justify-content: center` |
| `justify-content-between` | `justify-content: space-between` |
| `justify-content-around` | `justify-content: space-around` |
| `align-items-start` | `align-items: flex-start` |
| `align-items-end` | `align-items: flex-end` |
| `align-items-center` | `align-items: center` |
| `align-items-baseline` | `align-items: baseline` |
| `align-items-stretch` | `align-items: stretch` |
| `align-content-start` | `align-content: flex-start` |
| `align-content-end` | `align-content: flex-end` |
| `align-content-center` | `align-content: center` |
| `align-content-between` | `align-content: space-between` |
| `align-content-around` | `align-content: space-around` |
| `align-content-stretch` | `align-content: stretch` |
| `align-self-auto` | `align-self: auto` |
| `align-self-start` | `align-self: flex-start` |
| `align-self-end` | `align-self: flex-end` |
| `align-self-center` | `align-self: center` |
| `align-self-baseline` | `align-self: baseline` |
| `align-self-stretch` | `align-self: stretch` |

### Float

| 名称 | 说明 |
| ---- | --- |
| `fixed-top` | 顶部 |
| `fixed-bottom` | 底部 |

### Text

#### Sizing

Ant Design 是以 `12px` 为基准字号。

| 名称 | 说明 |
| ---- | --- |
| `text-sm` | `12px` |
| `text-md` | `24px` |
| `text-lg` | `36px` |

#### Alignment

| 名称 | 说明 |
| ---- | --- |
| `text-left` | 文本居左 |
| `text-center` | 文本居中 |
| `text-right` | 文本居右 |

#### Wrapping

**容器必须是 `display: inline-block` 或 `display: block`。

| 名称 | 说明 |
| ---- | --- |
| `text-nowrap` | 文本超出不换行 |
| `text-truncate` | 文本超出截取并加 `...` |

#### Transformation

| 名称 | 说明 |
| ---- | --- |
| `text-lowercase` | 小写文本 |
| `text-uppercase` | 大写文本 |
| `text-capitalize` | 首词大写 |
| `text-deleted` | 删除线 |

#### Weight and italics

| 名称 | 说明 |
| ---- | --- |
| `font-weight-normal` | `font-weight: normal` |
| `font-weight-bold` | `font-weight: 700` |
| `font-italic` | `font-style: italic` |

### Borders

#### 边框

| 名称 | 说明 |
| ---- | --- |
| `border` | `border: 1px solid #f5f5f5 !important;` |
| `border-0` | `border: 0 !important;` |
| `border-top-0` | `border-top: 0 !important;` |
| `border-right-0` | `border-right: 0 !important;` |
| `border-bottom-0` | `border-bottom: 0 !important;` |
| `border-left-0` | `border-left: 0 !important;` |

#### 颜色

支持色彩章节所有的色系&别名写法，例如：`border-red`、`border-success`。

#### 圆角

| 名称 | 说明 |
| ---- | --- |
| `rounded-0` | `border-radius: 0;` |
| `rounded-circle` | `border-radius: 50%;` |
| `rounded-sm` | `border-radius: 2px;` |
| `rounded-md` | `border-radius: 4px;` |
| `rounded-lg` | `border-radius: 6px;` |

### Width

| 名称 | 说明 |
| ---- | --- |
| `width-sm` | `160px` |
| `width-md` | `240px` |
| `width-lg` | `320px` |
| `width-[0-10]` | `0%-100%` |

### Responsive

类似 Bootstrap 响应式规则，当屏幕小于 `480px` 时会隐藏所有 `hidden-xs` 类。

| 名称 | 屏幕 |
| ---- | --- |
| `hidden-xs` | <480px |
| `hidden-sm` | <768px |
| `hidden-md` | <992px |
| `hidden-lg` | <1200px |

### Other

| 名称 | 说明 |
| ---- | --- |
| `block-center` | `margin: 0 auto` |
| `point` | `cursor: pointer` |
| `no-resize` | 设置不允许调整元素 |

### ng-zorro-antd 组件补丁类

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th style="width: 30%">类名</th>
            <th>描述</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>nz-button</code></td>
            <td><code>.ant-btn__block</code></td>
            <td>强制按钮为块元素<code>display: block; width: 100%;</code></td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="4"><code>nz-card</code></td>
            <td><code>.ant-card__title-img</code></td>
            <td>标题为图片时设置 <code>valign</code> 为内容与对象中部对齐</td>
            <td></td>
        </tr>
        <tr>
            <td><code>.ant-card__img</code></td>
            <td>图片类型卡片强制设置 <code>ant-card-body</code> 无间距且支持内部 <code>img</code> 样式为自动100%大小</td>
            <td></td>
        </tr>
        <tr>
            <td><code>.ant-card__body-nopadding</code></td>
            <td>强制内容无间距</td>
            <td>过期，使用 <code>[nzNoPadding]</code> 替代</td>
        </tr>
        <tr>
            <td><code>.ant-card__{{color}}</code></td>
            <td>设置标题背景色</td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td><code>nz-breadcrumb</code></td>
            <td><code>.ant-breadcrumb__last-item-no-bold</code></td>
            <td>强制最后一项字体粗细为正常 <code>font-weight: normal</code></td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">纯CSS瀑布流</td>
            <td><code>.row-masonry</code></td>
            <td>行</td>
            <td></td>
        </tr>
        <tr>
            <td><code>.row-masonry-{xs|sm|md|lg|xl}-{1-10}</code></td>
            <td>列，响应式样式</td>
            <td></td>
        </tr>
        <tr>
            <td><code>.col-masonry</code></td>
            <td>列</td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td><code>nz-carousel</code></td>
            <td><code>.nz-carousel__dot-{{color}}</code></td>
            <td>设置指示点颜色</td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3"><code>nz-modal</code></td>
            <td><code>.modal-{sm|md|lg|xl}</code></td>
            <td>设置Modal的大小 <code>wrapClassName: 'modal-lg'</code></td>
            <td></td>
        </tr>
        <tr>
            <td><code>.modal-header</code></td>
            <td>自定义Modal时非常有效，<a href="//cipchk.github.io/ng-alain/#/elements/modal" target="_blank">DEMO</a></td>
            <td></td>
        </tr>
        <tr>
            <td><code>.modal-footer</code></td>
            <td>自定义Modal时非常有效</td>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td><code>list-group</code></td>
            <td></td>
            <td>列表组相当于 Bootstrap4。</td>
            <td>可由 <code>nz-list</code> 替代</td>
        </tr>
    </tbody>
</table>