# @csstools/css-calc 中文文档

规范地址：https://npmcn.com/package/%40csstools/css-calc/

版本：3\.4\.3
npm 元数据更新时间：2026-10-02T15:54:10.312Z
中文译文更新时间：2026-11-05T15:20:01.414Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40csstools/css-calc
原文对照：https://npmcn.com/package/%40csstools/css-calc/?lang=original
项目主页：https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc#readme
源码仓库：https://github.com/csstools/postcss-plugins

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

- 包体积（解压后）：46.7 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：0 个
- peer 依赖：@csstools/css-tokenizer ^4\.0\.2，@csstools/css-parser-algorithms ^4\.0\.2
- 首次发布：2023-02-21T16:21:27.801Z
- 最新版本发布：2026-10-02T15:54:10.067Z
- 近 30 天下载量：405713201（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：36（近 12 个月 11 个）

## 中文简介

解决 CSS 数学表达式

## 安装

```sh
npm install @csstools/css-calc
```

也可以使用：`pnpm add @csstools/css-calc`、`yarn add @csstools/css-calc`、`bun add @csstools/css-calc`

## README

# CSS 卡尔克 ![for CSS](https://cssdb.org/images/css.svg)

[![npm version](https://img.shields.io/npm/v/@csstools/css-calc.svg)](https://www.npmjs.com/package/@csstools/css-calc) [![Build Status](https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test) [![Discord](https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white)](https://discord.gg/bUadyRwkJS)

已执行: [https://drafts.csswg.org/cs-values-4/ (中文(简体) )](https://drafts.csswg.org/css-values-4/) 于2023-02-17查阅

## 使用量

添加 [CSS 计算](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc) 对您的项目:

```bash
npm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
```

### 有字符串值 :

```mjs
import { calc } from '@csstools/css-calc';

// '20'
console.log(calc('calc(10 * 2)'));
```

### 有组件值 :

```mjs
import { stringify, tokenizer } from '@csstools/css-tokenizer';
import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';
import { calcFromComponentValues } from '@csstools/css-calc';

const t = tokenizer({
    css: 'calc(10 * 2)',
});

const tokens = [];

{
    while (!t.endOfFile()) {
        tokens.push(t.nextToken());
    }

    tokens.push(t.nextToken()); // EOF-token
}

const result = parseCommaSeparatedListOfComponentValues(tokens, {});

// filter or mutate the component values

const calcResult = calcFromComponentValues(result, { precision: 5, toCanonicalUnits: true });

// filter or mutate the component values even further

const calcResultStr = calcResult.map((componentValues) => {
    return componentValues.map((x) => stringify(...x.tokens())).join('');
}).join(',');

// '20'
console.log(calcResultStr);
```

### 选项

#### `precision` 数字 :

这个 `precision` 选项是若干小数. 默认精度相当高. 它旨在高到足以使取舍在浏览器中无法被注意.

在科学标记中序列化的数值没有变化.

可以设置为更低的号码以适应您的需要.

```mjs
import { calc } from '@csstools/css-calc';

// '0.3'
console.log(calc('calc(1 / 3)', { precision: 1 }));
// '0.33'
console.log(calc('calc(1 / 3)', { precision: 2 }));
// '1.0000000000000001e-20'
console.log(calc('calc(1e-10 * 1e-10)'));
```

#### `globals` 数字 :

传递全局值为密钥值对的映射.

> 示例:相对颜色语法(`lch(from pink calc(l / 2) c h)`)将彩色通道信息曝光为标识符. 通过环球 `l`, (中文(简体) ), `c` 财务报告和审定财务报表 `h` 可以解决巢穴问题 `calc()`对.

```mjs
import { calc } from '@csstools/css-calc';

const globals = new Map([
    ['a', '10px'],
    ['b', '2rem'],
]);

// '20px'
console.log(calc('calc(a * 2)', { globals: globals }));
// '6rem'
console.log(calc('calc(b * 3)', { globals: globals }));
```

#### `toCanonicalUnits` 数字 :

默认情况下, 此软件包将尝试保存单位 . 这样做的修炼非常简单. 我们用我们遇到的第一个单位 尝试把其他维度转换成那个单位.

这更符合用户对 CSS dev 工具的期望.

如果您想要将输出关闭于 CSS 序列化值, 您可以通过 `toCanonicalUnits: true`。 。 。 .

```mjs
import { calc } from '@csstools/css-calc';

// '20hz'
console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: true }));

// '20hz'
console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: true }));

// '0.02khz' !!!
console.log(calc('calc(0.01khz + 10hz)', { toCanonicalUnits: false }));

// '20hz'
console.log(calc('calc(10hz + 0.01khz)', { toCanonicalUnits: false }));
```

## 常见问题

### @csstools/css-calc 是什么？

解决 CSS 数学表达式

### 如何安装 @csstools/css-calc？

在项目目录运行 npm install @csstools/css-calc，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@csstools/css-tokenizer（^4\.0\.2）、@csstools/css-parser-algorithms（^4\.0\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @csstools/css-calc 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @csstools/css-calc 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @csstools/css-calc 需要什么版本的 Node\.js？

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

### @csstools/css-calc 可以商用吗？

@csstools/css-calc 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @csstools/css-calc 的下载量有多少？

根据 npm 官方下载统计，@csstools/css-calc 在 2026/10/07 – 2026/11/05 这 30 天内被下载 405,713,201 次，日均约 13,523,773 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @csstools/css-calc 还在维护吗？

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