Ant Design Pro快速入门——样式

纯前端菜鸡，只有一些HTML、CSS和JavaScript的基础，最近配合的前端跑路了，想用Ant Design Pro来快速搭建一套中后台来管理数据，只能自己上了，主要自己也想试试水，从后端的视角看前端，整体偏向于实战。

样式和资源

虽然Ant Design Pro提供了一套完整的样式，但某些时候，我们仍需要自定义样式，比如：

使用CSS

虽然umi推荐使用less，但仍支持css，这里简单介绍下，新建OK.css文件，内容如下：

 div p{
  color: red;
 }

在src/pages/OK.tsx中引入：

import React from 'react';
import styles from './OK.css';
const OKPage: React.FC = () => {
  return (
    <div>
      <p className={styles.welcome}>你好</p>
    </div>
  );
}
export default OKPage;

CSS Modules

在样式开发过程中，由于CSS文件中的选择器是全局生效的，不同文件中的同名选择器会导致样式冲突，为避免这个问题，我们就不得不更改CSS的类名以避免冲突，为解决这个问题，Ant Design Pro默认使用了CSS Modules模块化方案，通过浏览器我们查看元素：

<div><p class="welcome___X2LHK">你好</p></div>

如代码中所示，Webpack会在构建时将类名转为唯一的哈希值，实现样式隔离，若需要使用CSS模块化，最好添加*.module.css这样的后缀，否则可能会导致构建工具不启用CSS Modules，不过有时候我们仍需要全局样式，这就需要global来表明全局样式：

:global(.welcome) {
  color: red;
  font-size: 20px;
  border: 1px solid black;
}

使用时：

import React from 'react';
import './OK.module.css'; // 引入 CSS Module（但实际不需要 styles 对象）

const OKPage: React.FC = () => {
  return (
    <div>
      <p className="welcome">你好</p> {/* 直接使用全局类名 */}
    </div>
  );
};
export default OKPage;

这时在查看HTML源码：

<div><p class="welcome">你好</p> </div>

使用less

less是一种css预处理，它在原生css的基础上扩展了编程特性，使样式代码更易维护、更高效。

1. 变量

less提供了变量，我们可以定义一些变量，然后在样式中使用这些变量，这样，当需要修改样式时，只需要修改变量的值，而不需要修改样式代码，从而提高代码的可维护性。

原生CSS中，重复的颜色，尺寸需要修改多处：

.header {
  color:red;
}
.button {
  background:red;
}

而less中则可以通过变量复用：

@primary-color: red; // 定义变量

.header {
  color: @primary-color;
}
.button {
  background: @primary-color;
}

2. 嵌套

在原生CSS中，层级选择器需要重复编写类名：

.navbar {
  background: white;
}
.navbar .item {
  color: black;
}
.navbar .item:hover {
  color: red;
}

而在less中，我们可以使用嵌套选择器，减少重复代码：

.navbar {
  background: white;
  .item {
    color: black;
    &:hover {
      color: red;
    }
  }
}

3. 混合

例如一个阴影效果，CSS需要重复编写：

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.modal {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

而less则可以直接复用：

.shadow-mixin() {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
  .shadow-mixin();
}
.modal {
  .shadow-mixin();
}

4. 运算

CSS中，无法进行数学运算，而less则可以，例如计算间距：

.container {
  padding: 16px;
}
.item {
  margin: calc(16px / 2); /* 需要手动计算或使用 calc */
}

而less中则可以自动计算结果：

@base-padding: 16px;

.container {
  padding: @base-padding;
}
.item {
  margin: @base-padding / 2; // 自动计算为 8px
}

5. 函数

less中内置了函数来处理颜色和字符串，如：

@color: #1e88e5;

.button {
  background: darken(@color, 10%); // 颜色变暗
  border: 1px solid lighten(@color, 20%); // 颜色变亮
}

6. 导入

原生css的import会导致多个http请求，而less在编译后则会将多个文件合并为一个，从而减少http请求：

// variables.less
@primary-color: #1e88e5;

// main.less
@import "variables.less"; // 预处理阶段合并文件
.header {
  color: @primary-color;
}

7. 条件和循环

less提供了循环来减少重复代码，如：

.generate-columns(@n, @i: 1) when (@i <= @n) {
  .col-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
.generate-columns(12); // 生成 12 列栅格

示例中的代码会循环生成12个类。