# @crocsx/scss-to-json 中文文档

规范地址：https://npmcn.com/package/%40crocsx/scss-to-json/

版本：3\.0\.0
npm 元数据更新时间：2022-04-05T01:51:05.473Z
中文译文更新时间：2026-11-11T01:08:14.801Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40crocsx/scss-to-json
原文对照：https://npmcn.com/package/%40crocsx/scss-to-json/?lang=original
项目主页：https://github.com/Crocsx/scss-to-json
源码仓库：https://github.com/Crocsx/scss-to-json

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

- 包体积（解压后）：36.8 kB，33 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 0\.10\.0
- 运行依赖：3 个
- 首次发布：2021-02-19T02:28:15.037Z
- 最新版本发布：2021-02-19T02:49:10.568Z
- 近 30 天下载量：5964（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

用于将 SCSS 变量文件转换为 JSON 的工具

## 安装

```sh
npm install @crocsx/scss-to-json
```

也可以使用：`pnpm add @crocsx/scss-to-json`、`yarn add @crocsx/scss-to-json`、`bun add @crocsx/scss-to-json`

## README

# 叉头

这是叉子 [Ryan Bahniuk的scs -to -json (英语)](https://github.com/ryanbahniuk/scss-to-json). 由于原项目看起来不再维持. 我创建了一个叉子 包括待定公关.

# scs-to-json (英语)

> 一个以JSON格式要求SCSS变量的软件包.

这个软件包允许您在您的 JS 代码中使用您的 SCSS 变量 。 具体而言,它需要一个SCSS可变文件(下面的例子),并将解析,运行 Sass 函数,并转换为JSON格式. 此软件包是一个函数, 可以在内存中为您实现此转换 。 如果您想要将 JSON 输出到您的文件系统, 您应该使用关联 Ryan Bahniuk 的 [闪闪发光](https://www.npmjs.com/package/grunt-scss-to-json "grunt-scss-to-json") 软件包.

## 安装

通过 npm 安装 :

```sh
npm install scss-to-json
```

## 投入和产出

这个软件包需要一个SCSS变量文件,它自己孤立,没有其他SCSS代码. 如果您在前端框架或库中工作, 您的SCSS代码很可能已经以这种方式设置 。 例如,这个软件包在变量上效果很好. 这样的文件 :

```scss
// Font Sizes
$font-size: 14px;
$font-size-large: $font-size * 1.1;

// Colors
$text-color: #666;
$text-color-light: lighten($text-color, 15%);
$border-color: #123 !global; // use for all borders
```

当运行上面的代码时, scs-to-json 将输出以下 JSON :

```js
{
  '$font-size': '14px',
  '$font-size-large': '15.4px',
  '$text-color': '#666',
  '$text-color-light': '#8c8c8c',
  '$border-color': '#123'
}
```

注意: scs- to-json 将过滤出旗帜( 标记为 !),并在生成 JSON 对象之前对 Sass 函数进行评论和评价 .

## 使用此软件包

在您的 CommunityJS JavaScript 文件里, 需要此软件包会返回一个会取回您 SCSS 变量文件的文件路径的函数 。 它还需要一个可选选项对象,下一节详细介绍.

```js
var scssToJson = require('scss-to-json');
var path = require('path');

var filePath = path.resolve(__dirname, 'colors.scss');
var colors = scssToJson(filePath);
```

## 选项

返回函数的第二个参数是一个可选选项对象。 每项备选方案详述如下:

### 依赖关系

SCSS变量文件有时依赖您导入树上早些时候定义的其他SCSS变量. 为了将这些文件隔离(并且仍然产生JSON),您可以指定一个文件所依赖的文件组. 例如,下面我们试图转换我们的色彩映射文件,但这取决于在不同的文件中找到的实际色彩定义.

```js
var scssToJson = require('scss-to-json');
var path = require('path');

var filePath = path.resolve(__dirname, 'color-mapping.scss');
var dependencyPath = path.resolve(__dirname, 'colors.scss');
var colors = scssToJson(filePath, {
  dependencies: [{path: dependencyPath}]
});
```

### 范围界定

SCSS可变文件能够提供局部和全球范围,方法如下:

```scss
%scoped {
  $font-size: 14px;
  $font-size-large: $font-size * 1.1 !global;
}

html {
  @extend %scoped;
}
```

这个可以留着 `$font-size` 在该块内进行局部拓宽,同时允许其用于得出带有标记的全局变量 `!global` 旗帜。 这些变量将在您的 SCSS 导入树上提供 .

如果您在您的 SCSS 变量文件中使用这种方法, 您可以提供一个 scss- to- json 选项, 只输出全局变量到 JSON 。 选项以范围占位符的名称为字符串.

```js
var scssToJson = require('scss-to-json');
var path = require('path');

var filePath = path.resolve(__dirname, 'variables.scss');
var colors = scssToJson(filePath, {
  scope: '%scoped'
});
```

### 重命名 JSON 密钥

在 JSON 输出中修改 SCSS 变量的命名方案 `rename` 选项 :

```scss
$first-variable: red;
$second-variable: blue;
```

```js
var scssToJson = require('scss-to-json');
var path = require('path');
var camelCase = require('lodash.camelCase');
var filePath = path.resolve(__dirname, 'variables.scss');
var colors = scssToJson(filePath, {
  rename: function(name) {
    return camelCase(name.replace('$', ''));
  }
});
```

在以上代码上运行时, scs-to-json 将输出以下 JSON :

```js
{
  "firstVariable": "red",
  "secondVariable": "blue"
}
```

返回的值 `rename` 函数作为-is使用,因此如果不需要更改,请确定返回原名。 虽然如上例所示,这最能用于无损重命名,但如果在JSON重命名后,多个变量是相同的,那么JSON将只包含最后指定的值.

## 国 际

您还可以使用 CLI `scss-to-json <file>`。 。 。 .

## 捐款

欢迎拉动请求。 如果您添加了功能, 请添加单位测试 以盖取之.

## 许可证

麻省理工学院

## 常见问题

### @crocsx/scss-to-json 是什么？

用于将 SCSS 变量文件转换为 JSON 的工具

### 如何安装 @crocsx/scss-to-json？

在项目目录运行 npm install @crocsx/scss-to-json，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 scss-to-json，可以用 npx scss-to-json 直接运行。

### @crocsx/scss-to-json 支持 TypeScript 吗？

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

### @crocsx/scss-to-json 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @crocsx/scss-to-json 需要什么版本的 Node\.js？

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

### @crocsx/scss-to-json 可以商用吗？

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

### @crocsx/scss-to-json 的下载量有多少？

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

### @crocsx/scss-to-json 还在维护吗？

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