如何在SCSS文件中使用@ant-design/colors？

一、安装依赖 #

先给项目装上@ant-design/colors包，用npm或yarn都行：

npm install @ant-design/colors --save-dev
# 或
yarn add @ant-design/colors --dev

二、在SCSS中导入并使用工具 #

在你的SCSS文件顶部导入包：

@import '~@ant-design/colors';

这个包提供了两个核心工具来生成Ant Design规范的颜色：

• ant-palette($color)：传入主色值，生成包含10个色阶的颜色数组（对应官网从浅到深的色阶）
• ant-color($color, $type, $level)：生成主色的浅色或深色变体，$type选light/dark，$level填1-5的数值

示例代码：

@import '~@ant-design/colors';

// 生成红色系完整色阶
$red-colors: ant-palette(#f5222d);
// 提取单个色阶变量
$red-1: nth($red-colors, 1); // 最浅红色
$red-5: nth($red-colors, 5); // 标准红色
$red-10: nth($red-colors, 10); // 最深红色

// 生成蓝色主色的浅色/深色变体
$primary-light: ant-color(#1890ff, 'light', 2);
$primary-dark: ant-color(#1890ff, 'dark', 2);

// 样式中直接用变量
.danger-btn {
  background: $red-5;
  color: #fff;
  &:hover {
    background: nth($red-colors, 6); // hover用更深一级的红色
  }
}

.primary-card {
  border-top: 3px solid $primary-light;
}

三、匹配Ant Design官方颜色规范 #

Ant Design官方颜色规范里的所有主色和色阶，都能通过ant-palette()函数生成，和官网展示的色值完全对应：

比如官网蓝色主色是#1890ff，调用ant-palette(#1890ff)就能得到蓝色系的10个色阶；绿色主色#52c41a同理，生成的色阶和官网一一匹配。

要是想直接用官网固定色值，也可以手动定义变量：

// 直接对应官网色值定义变量
$blue-1: #e6f7ff;
$blue-5: #1890ff;
$blue-10: #001529;

内容的提问来源于stack exchange，提问作者Kate B