# @cssninja/bulma-css-vars 中文文档

规范地址：https://npmcn.com/package/%40cssninja/bulma-css-vars/

版本：0\.9\.3
npm 元数据更新时间：2025-04-02T11:22:40.329Z
中文译文更新时间：2026-11-11T06:26:16.346Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cssninja/bulma-css-vars
原文对照：https://npmcn.com/package/%40cssninja/bulma-css-vars/?lang=original
项目主页：https://github.com/cssninjaStudio/bulma-css-vars#readme
源码仓库：https://github.com/cssninjaStudio/bulma-css-vars

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

- 包体积（解压后）：144 kB，42 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>= 10\.0\.0
- 运行依赖：3 个
- peer 依赖：bulma ^0\.9\.3
- 首次发布：2023-01-02T14:51:59.844Z
- 最新版本发布：2025-04-02T11:22:40.133Z
- 近 30 天下载量：2913（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

Bulma 有 CSS 变量

## 安装

```sh
npm install @cssninja/bulma-css-vars
```

也可以使用：`pnpm add @cssninja/bulma-css-vars`、`yarn add @cssninja/bulma-css-vars`、`bun add @cssninja/bulma-css-vars`

## README

# Bulma CSS 瓦尔斯

布尔马CSS 宽度 [**布玛**](https://github.com/jgthms/bulma) 用于使用 CSS 变量,可以在网站运行时设置为任意值,并为没有 CSS 变量能力的浏览器安装倒置.

[![version](https://img.shields.io/npm/v/bulma-css-vars.svg)](https://www.npmjs.org/package/bulma-css-vars) [![](https://github.com/wtho/bulma-css-vars/workflows/ci/badge.svg)](https://github.com/wtho/bulma-css-vars/actions?query=workflow%3Aci) [![](https://img.shields.io/badge/Demo-green)](https://wtho.github.io/bulma-css-vars)

这是一个扩展和一种"sass-pre-president-processioner",它试图尽可能少地侵入Bulma,同时使bulma色彩计划中的任意色彩变化自动化,尽可能容易.

有一些设置和配置需要完成,但一旦设置,它的工作就像一个魅力。 读取部分 [有什么困难](https://npmcn.com/package/%40cssninja/bulma-css-vars/#readme-what-is-the-difficulty-why-this-setup),以了解为什么需要这种设置.

## 使用量

```bash
npm i -S bulma bulma-css-vars
npm i -D sass
node ./node_modules/.bin/bulma-css-vars --init
```

要使用这个软件包, 你必须使用飞镖执行 sass, the `sass` 软件包, 版本 `1.23` 或更高级。 如果你使用网络包装和 `sass-loader`你必须确保你没有 `node-sass` 安装或配置 `options: { implementation: require('sass') }` 联 合 国 `sass-loader`。 。 。 .

```js
// bulma-css-vars.config.js
import { hsl, rgb } from 'bulma-css-vars'

// color names have to match bulma's $variable-name, without '$'
// values will be used for initial colors and fallback
const appColors = {
  black: hsl(0, 0, 4),
  'scheme-main': rgb(200, 105, 84),
  red: { r: 255, b: 0, g: 0}
  primary: '#663423',
  blue: 'blue',
}
// reuse variable colors
appColors['text'] = appColors['primary']

export default {
  sassEntryFile: './src/style/main-sass-file.sass',
  jsOutputFile: './src/bulma-generated/bulma-colors.js',
  sassOutputFile: './src/bulma-generated/generated-vars.sass',
  cssFallbackOutputFile: './src/bulma-generated/generated-fallbacks.css',
  colorDefs: appColors,
  globalWebVar: false,
  transition: '0.5s ease',
}
```

您需要配置 `bulma-css-vars` 来描述您的 sass 设置, 特别是您的 sass 条目文件, 您想要修改的变量, 以及生成的 bulma 文件应放在哪里 .

| 配置密钥 |  |
| --- | :-- |
| `sassEntryFile` | 您的 Sass 条目文件 应用程序 - 相对路径表配置文件 |
| `jsOutputFile` | 生成的 js 文件的全名,也可以是 `<a-typescript-file>.ts` |
| `sassOutputFile` | 生成 sass 文件的全名, 应当包含在您的应用程序样式中 |
| `cssFallbackOutputFile` | 生成的 css 文件的全名, 应当包含在您的 sass app 样式中 (可选) |
| `colorDefs` | 颜色定义,名称必须匹配 bulma 颜色名称(见上文实例) |
| `globalWebVar` | 如果您直接在浏览器中导入 js 文件, 您需要 `true`,参见 [直接网络设置](https://npmcn.com/package/%40cssninja/bulma-css-vars/#readme-direct-web-setup),默认为 `false` |
| `transition` | 将创建 [CSS 过渡](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) 用于所有彩色 CSS 变量的短手字,应该由 `[ <duration> [ <timing-function> [ <time-delay> ] ] ]` |

有些文件需要设置, 可用 `node ./node_modules/.bin/bulma-css-vars --init`。 。 。 .

```scss
// main.scss
@import './bulma-generated/generated-fallback.css'; // import fallbacks first, so they are overridden
@import './bulma-generated/generated-vars.sass';
@import '../node_modules/bulma-css-vars/bulma-cv-lib';
```

而不是使用 `bulma-cv-lib.sass`您也可以使用您喜欢的 bulma 包。 看着里面 `bulma-cv-lib.sass` 理解更多,特别是导入 `functions.sass` 在原件之后 `functions.sass` 已装入.

```json
// package.json
  scripts: {
    "update-bulma-colors": "bulma-css-vars",
  }
```

剧本 `./node_modules/.bin/bulma-css-vars` 修改颜色时必须运行 `bulma-css-vars.config.js` 它也会更新三个输出文件.

```js
// in-the-web-app.js
import { ColorUpdater } from 'bulma-css-vars'
import { bulmaCssVariablesDefs } from './bulma-generated/bulma-colors'

const updater = new ColorUpdater(bulmaCssVariablesDefs)

// do the update manually
const updated = colorUpdater.getUpdatedVars(colorName, value)
updated.forEach(({ name, value }) =>
  document.documentElement.style.setProperty(name, value)
)
// or let it do the updater
colorUpdater.updateVarsInDocument(colorName, value)
```

您也可以使用类型脚本

```ts
// in-the-web-app.ts
import { ColorUpdater } from 'bulma-css-vars'
import { bulmaCssVariablesDefs } from './bulma-generated/bulma-colors'

// the updater do the style change
const colorUpdater = new ColorUpdater(bulmaCssVariablesDefs)
colorUpdater.updateVarsInDocument(colorName, value)
```

令人惊讶的是,色彩更新器需要了解当前变量,所以 `bulmaCssVariablesDefs` 从生成的 js 文件必须包含在您的应用程序中 . `colorName` 必须在 `bulma-css-vars.config.js`。 。 。 .

### 洞穴

-   需要节点.js 和 Dart Sass
-   设置的复杂性

## 有什么困难? 为什么是这个圈套?

问题是 Bulma 严重依赖 sass 预处理,所以如果设置一个颜色变量用于 `$primary`,此颜色将被修改,用于按键上悬浮 / 聚焦阴影,计算出按键上文本的倒置等. 如果我们输入一个 CSS 变量 `var(--my-dynamic-primary-color)` 在此, 不仅 sass 失败 , 并且如果您要在运行时更改此颜色, 仍然会保留所有计算出的阴影 .

## 解决办法——如何运作

首先从此库补丁原始 sass 函数, 例如 `darken`, (中文(简体) ), `lighten`,以及 bulma 帮助器的功能,如 `findColorInvert`。这只能归功于飞镖的力量 `sass` 软件包,比 `node-sass` 软件包。 补丁功能可以处理 `var(--variablename)` 变量,并决定是否将原函数调用,或者是否添加所输入变量中新的、衍生的变量.

譬如说, `darken(var(--primary), 10%)` 将变成 `var(--primary--10--darken)`,然后向 ccs 样式表添加一个衍生变量. 这个库将这个过程自动化,所以对于每个实际使用和衍生的变量,都会生成一个新的css变量. 为了发挥这一技术的杠杆作用,库然后会编译出cs并获得一个总览,其中哪些衍生变量都在实际使用的样式表中.

这一技术的优点是,只有实际需要的变量才会被生成并添加到样式表上. 缺点是,当您决定在应用程序中添加一个附加变量时,您需要运行此命令 .

从基变量和衍生变量列表中,此库可以创建初始 sass 文件,您应该在 sass 汇编中包含该文件 。 它使用 js 版本计算样式 `darken`, (中文(简体) ), `lighten`, (中文(简体) ), `findColorInvert`举例来说, `--primary--10--darken: #532949;` 将由 `bulma-css-vars` 还有,旁边 `--primary: #694392;`。 。 。 .

您的入学申请中也应包含该课程。 每当您想要更改 bulma 颜色变量时, 例如 : `$blue`,色彩更新器知道需要调整哪些衍生变量,并允许您更新所有受影响的变量.

这样你就可以继续使用 完整的布玛色彩丰富。 尝试演示并查看按钮的字体在深/ 亮颜色上的变化 !

## 直接网络设置

如果不使用任何捆绑或网络框架,也可以直接包括burma-css-vars. 你还需要Node.js和sass.

```sass
// app.sass
@import './bulma-vars.sass'
@import './node_modules/bulma-css-vars/bulma-cv-lib.sass'
```

确定设置 `globalWebVars` 以真实的方式 `bulma-css-vars.config.js`运行 `./node_modules/.bin/bulma-css-vars` 财务报告和审定财务报表 `sass app.sass > app.css`。 。 。 .

在您的html中:

```html
<head>
  <link res="stylesheet" src="./app.css">
</head>
<body>
  <!-- [your webpage] -->

  <!-- loads window.BulmaColorUpdater -->
  <script src="./node_modules/bulma-css-vars/dist/bulma-css-vars.web-bundle.js"></script>

  <!-- loads window.bulmaCssVarsDef with your variable definitions -->
  <script src="./bulma-colors.js"></script>
  <script>
    const updater = new BulmaColorUpdater(bulmaCssVarsDef)
    updater.updateVarsInDocument('black', '#553292')
  </script>
</body>
```

## 新特性

欢迎公关! 如果您想要构建此仓库并尝试演示, 请确保您使用 `yarn` 财务报告和审定财务报表 `yarn install` 以安装软件包 `demo` 文件夹. `npm` 将创建符号链接而不是真实文件副本,这可能会给相对 bulma 文件的引用造成问题.

## 常见问题

### @cssninja/bulma-css-vars 是什么？

Bulma 有 CSS 变量

### 如何安装 @cssninja/bulma-css-vars？

在项目目录运行 npm install @cssninja/bulma-css-vars，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：bulma（^0\.9\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 bulma-css-vars，可以用 npx bulma-css-vars 直接运行。

### @cssninja/bulma-css-vars 支持 TypeScript 吗？

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

### @cssninja/bulma-css-vars 支持 ESM 还是 CommonJS？

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

### @cssninja/bulma-css-vars 需要什么版本的 Node\.js？

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

### @cssninja/bulma-css-vars 可以商用吗？

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

### @cssninja/bulma-css-vars 的下载量有多少？

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

### @cssninja/bulma-css-vars 还在维护吗？

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