Ant Design Colors for Scss

English | 简体中文

Ant Design Colors 的 SASS/SCSS 实现

Install

1npm install ant-design-colors-scss --save-dev

Usage

1@use 'ant-design-colors-scss';

根据你的设置，你可能需要将 node_modules 目录配置为 loadPath：

Command-Line

1sass <input.scss> [output.css] --load-path=node_modules

JavaScript API

1const sass = require('sass');
2
3sass.compile(filePath, {
4  loadPaths: ['node_modules']
5});

Example

1@use 'ant-design-colors-scss' as antd-colors;
2
3@debug antd-colors.$blue;
4// [#E6F4FF, #BAE0FF, #91CAFF, #69B1FF, #4096FF, #1677FF, #0958D9, #003EB3, #002C8C, #001D66]
5@debug antd-colors.$blue-primary;
6// #1677FF
7@debug antd-colors.$blue-3;
8// #91CAFF
9
10@debug antd-colors.$blue-dark;
11// [#111A2C, #112545, #15325B, #15417E, #1554AD, #1668DC, #3C89E8, #65A9F3, #8DC5F8, #B7DCFA]
12@debug antd-colors.$blue-dark-primary;
13// #1668DC
14@debug antd-colors.$blue-dark-3;
15// #15325B
16
17@debug antd-colors.generate(#1677FF);
18// [#E6F4FF, #BAE0FF, #91CAFF, #69B1FF, #4096FF, #1677FF, #0958D9, #003EB3, #002C8C, #001D66]
19@debug antd-colors.generate(#1677FF, ('theme': 'dark'));
20// [#111A2C, #112545, #15325B, #15417E, #1554AD, #1668DC, #3C89E8, #65A9F3, #8DC5F8, #B7DCFA]
21
22@debug antd-colors.$palette; // Or @debug antd-colors.$palette-dark;
23/*
24(
25  "red"     : [...],
26  "volcano" : [...],
27  "orange"  : [...],
28  "gold"    : [...],
29  "yellow"  : [...],
30  "lime"    : [...],
31  "green"   : [...], 
32  "cyan"    : [...], 
33  "blue"    : [...], 
34  "geekblue": [...],
35  "purple"  : [...],
36  "magenta" : [...],
37  "gray"    : [...]
38)
39*/

License

MIT License © 2023-PRESENT 13OnTheCode