# @alexlafroscia/postcss-color-mod-function 中文文档

规范地址：https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/

版本：4\.0\.0
npm 元数据更新时间：2022-04-04T12:41:04.162Z
中文译文更新时间：2026-11-08T03:10:26.474Z
软件包许可：CC0-1\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alexlafroscia/postcss-color-mod-function
原文对照：https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/?lang=original
项目主页：https://github.com/jonathantneal/postcss-color-mod-function#readme
源码仓库：https://github.com/jonathantneal/postcss-color-mod-function

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：361 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=6\.0\.0
- 运行依赖：2 个
- peer 依赖：postcss ^8\.2\.15
- 首次发布：2021-08-10T17:27:28.311Z
- 最新版本发布：2021-08-10T17:27:28.529Z
- 近 30 天下载量：1924（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

使用 CSS 中的颜色模式函数修改颜色

## 安装

```sh
npm install @alexlafroscia/postcss-color-mod-function
```

也可以使用：`pnpm add @alexlafroscia/postcss-color-mod-function`、`yarn add @alexlafroscia/postcss-color-mod-function`、`bun add @alexlafroscia/postcss-color-mod-function`

## README

# PostCSS 彩色调 () 函数 [![PostCSS Logo](https://postcss.github.io/postcss/logo.svg)](https://github.com/postcss/postcss)

[![NPM Version](https://img.shields.io/npm/v/postcss-color-mod-function.svg)](https://www.npmjs.com/package/postcss-color-mod-function) [![CSS Standard Status](https://cssdb.org/badge/color-mod-function.svg)](https://preset-env.cssdb.org/features#color-mod-function) [![Build Status](https://img.shields.io/travis/jonathantneal/postcss-color-mod-function.svg)](https://travis-ci.org/jonathantneal/postcss-color-mod-function) [![Support Chat](https://img.shields.io/badge/support-chat-blue.svg)](https://gitter.im/postcss/postcss)

[PostCSS 彩色调 () 函数](https://github.com/jonathantneal/postcss-color-mod-function) 让您使用 `color-mod()` 函数在 CSS 中,按照过时的版本 [CSS 颜色模块 4级](https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod) 规格(2016年7月5日).

**⚠️ `color-mod()` 已删除 [颜色模块 第4级规格](https://www.w3.org/TR/css-color-4/#changes-from-20160705). (中文(简体) )[这就是为什么](https://github.com/w3c/csswg-drafts/commit/034b063697c3dadf144504f52e0858a79cd84414)(中文(简体) )**

```pcss
:root {
  --brand-red:      color-mod(yellow blend(red 50%));
  --brand-red-hsl:  color-mod(yellow blend(red 50% hsl));
  --brand-red-hwb:  color-mod(yellow blend(red 50% hwb));
  --brand-red-dark: color-mod(red blackness(20%));
}

/* becomes */

:root {
  --brand-red:      rgb(255, 127.5, 0);
  --brand-red-hsl:  rgb(255, 127.5, 255);
  --brand-red-hwb:  rgb(255, 127.5, 0);
  --brand-red-dark: rgb(204, 0, 0);
}

/* or, using stringifier(color) { return color.toString() } */

:root {
  --brand-red:      rgb(100% 50% 0% / 100%);
  --brand-red-hsl:  hsl(30 100% 50% / 100%);
  --brand-red-hwb:  hwb(30 0% 0% / 100%);
  --brand-red-dark: hwb(0 0% 20% / 100%);
}
```

### 支持的颜色

这个 `color-mod()` 函数接受 `rgb()`,以逗号分隔 `rgb()`, (中文(简体) ), `rgba()`, (中文(简体) ), `hsl()`,以逗号分隔 `hsl()`, (中文(简体) ), `hsla()`, (中文(简体) ), `hwb()`,以及 `color-mod()` 颜色,以及 3, 4, 6和 8 二进制颜色, 并命名 不需要额外插件的颜色.

实施详情见 [规格](https://www.w3.org/TR/2016/WD-css-color-4-20160705/#funcdef-color-mod)。 。 。 .

### 支持的色彩调整器

这个 `color-mod()` 函数接受 `red()`, (中文(简体) ), `green()`, (中文(简体) ), `blue()`, (中文(简体) ), `a()` 编号 : `alpha()`, (中文(简体) ), `rgb()`, (中文(简体) ), `h()` 编号 : `hue()`, (中文(简体) ), `s()` 编号 : `saturation()`, (中文(简体) ), `l()` 编号 : `lightness()`, (中文(简体) ), `w()` 编号 : `whiteness()`, (中文(简体) ), `b()` 编号 : `blackness()`, (中文(简体) ), `tint()`, (中文(简体) ), `shade()`, (中文(简体) ), `blend()`, (中文(简体) ), `blenda()`,以及 `contrast()` 颜色调整器.

实施详情见 [规格](https://www.w3.org/TR/css-color-4/#typedef-color-adjuster)。 。 。 .

### 支持的变量

默认, `var()` 变量如果对应的自定义会被使用 属性存在于 `:root` 规则,或者如果指定了倒置值.

## 使用量

添加 [PostCSS 彩色调 () 函数](https://github.com/jonathantneal/postcss-color-mod-function) 对您的项目:

```bash
npm install postcss postcss-color-mod-function --save-dev
```

使用 [PostCSS 彩色调 () 函数](https://github.com/jonathantneal/postcss-color-mod-function) 处理您的 CSS :

```js
const postcssColorMod = require('postcss-color-mod-function');

postcssColorMod.process(YOUR_CSS /*, processOptions, pluginOptions */);
```

或者把它当作一个 [邮政](https://github.com/postcss/postcss) 插件 :

```js
const postcss = require('postcss');
const postcssColorMod = require('postcss-color-mod-function');

postcss([
  postcssColorMod(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```

[PostCSS 彩色调 () 函数](https://github.com/jonathantneal/postcss-color-mod-function) 在所有节点环境中运行,并有下列特殊指令:

| [节点](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#node) | [后CSS CLI 软件](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#postcss-cli) | [网络软件包](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#webpack) | [创建反应应用](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#create-react-app) | [古尔普](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#gulp) | [格鲁特](https://npmcn.com/package/%40alexlafroscia/postcss-color-mod-function/INSTALL.md#grunt) |
| --- | --- | --- | --- | --- | --- |

## 选项

### 字符串

这个 `stringifier` 选项定义 CSS 中将如何生成已转换的颜色. 默认的遗产 `rgb()` 财务报告和审定财务报表 `rgba()` 颜色产生,但这可能是 易于更新以支持\[CSS 颜色模块 第4级颜色\]颜色.

```js
import postcssColorMod from 'postcss-color-mod-function';

postcssColorMod({
  stringifier(color) {
    return color.toString(); // use CSS Color Module Level 4 colors (rgb, hsl, hwb)
  }
});
```

未来的主要排放 [PostCSS 彩色调 () 函数](https://github.com/jonathantneal/postcss-color-mod-function) 可能扭转 功能,以便默认生成 CSS 色彩模块 第4级颜色.

### 未解决

这个 `unresolved` 选项定义未解决的函数和参数应如何 处理。 现有备选方案如下: `throw`, (中文(简体) ), `warn`,以及 `ignore`编辑 默认选项为 `throw`。 。 。 .

若为 `ignore` 用于: `color-mod()` 函数保持不变.

```js
import postcssColorMod from 'postcss-color-mod-function';

postcssColorMod({
  unresolved: 'ignore' // ignore unresolved color-mod() functions
});
```

### 变换参数

这个 `transformVars` 选项定义是否 `var()` 内部使用的变量 `color-mod()` 应转换为相应的自定义属性 备查 `:root`,或如果指定其倒数。 默认, `var()` 变量将被转换.

然而,由于这些转变发生在建设时,因此不可能是 认为准确。 依赖精确解决串联变量 了解活生生的DOM树.

### 导入从

这个 `importFrom` 选项允许您从其他来源导入变量, 可能是CSS,JS,和JSON文件, 直接传递对象.

```js
postcssColorMod({
  importFrom: 'path/to/file.css' // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }
});
```

```pcss
.brand-faded {
  color: color-mod(var(--brand-main) a(50%));
}

/* becomes */

.brand-faded {
  color: rgba(0, 0, 255, .5);
}
```

多个文件可以传递到此选项中,它们将在 他们收到命令 JavaScript 文件、 JSON 文件及对象需要 名称自定义属性 `customProperties` 或者说 `custom-properties` 键.

```js
postcssColorMod({
  importFrom: [
    'path/to/file.css',   // :root { --brand-dark: blue; --brand-main: var(--brand-dark); }
    'and/then/this.js',   // module.exports = { customProperties: { '--brand-dark': 'blue', '--brand-main': 'var(--brand-dark)' } }
    'and/then/that.json', // { "custom-properties": { "--brand-dark": "blue", "--brand-main": "var(--brand-dark)" } }
    {
      customProperties: {
        '--brand-dark': 'blue',
        '--brand-main': 'var(--brand-dark)'
      }
    }
  ]
});
```

变量可能参考其他变量,此插件将尝试 解决他们。 若为 `transformVars` 设置为 `false` 接下来 `importFrom` 不会 将使用.

## 常见问题

### @alexlafroscia/postcss-color-mod-function 是什么？

使用 CSS 中的颜色模式函数修改颜色

### 如何安装 @alexlafroscia/postcss-color-mod-function？

在项目目录运行 npm install @alexlafroscia/postcss-color-mod-function，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：postcss（^8\.2\.15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alexlafroscia/postcss-color-mod-function 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/alexlafroscia\_\_postcss-color-mod-function 是否存在。

### @alexlafroscia/postcss-color-mod-function 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @alexlafroscia/postcss-color-mod-function 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=6\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @alexlafroscia/postcss-color-mod-function 可以商用吗？

@alexlafroscia/postcss-color-mod-function 使用 CC0-1\.0 许可。作者放弃著作权，可不受限制地使用。以上为概括，不构成法律意见，请以许可原文为准。

### @alexlafroscia/postcss-color-mod-function 的下载量有多少？

根据 npm 官方下载统计，@alexlafroscia/postcss-color-mod-function 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,924 次，日均约 64 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alexlafroscia/postcss-color-mod-function 还在维护吗？

最新版本 4\.0\.0 发布于 2021/08/11（5 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/08/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。