叉头
这是叉子 Ryan Bahniuk的scs -to -json (英语). 由于原项目看起来不再维持. 我创建了一个叉子 包括待定公关.
scs-to-json (英语)
一个以JSON格式要求SCSS变量的软件包.
这个软件包允许您在您的 JS 代码中使用您的 SCSS 变量 。 具体而言,它需要一个SCSS可变文件(下面的例子),并将解析,运行 Sass 函数,并转换为JSON格式. 此软件包是一个函数, 可以在内存中为您实现此转换 。 如果您想要将 JSON 输出到您的文件系统, 您应该使用关联 Ryan Bahniuk 的 闪闪发光 软件包.
安装
通过 npm 安装 :
npm install scss-to-json
投入和产出
这个软件包需要一个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 :
{
'$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 变量文件的文件路径的函数 。 它还需要一个可选选项对象,下一节详细介绍.
var scssToJson = require('scss-to-json');
var path = require('path');
var filePath = path.resolve(__dirname, 'colors.scss');
var colors = scssToJson(filePath);
选项
返回函数的第二个参数是一个可选选项对象。 每项备选方案详述如下:
依赖关系
SCSS变量文件有时依赖您导入树上早些时候定义的其他SCSS变量. 为了将这些文件隔离(并且仍然产生JSON),您可以指定一个文件所依赖的文件组. 例如,下面我们试图转换我们的色彩映射文件,但这取决于在不同的文件中找到的实际色彩定义.
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可变文件能够提供局部和全球范围,方法如下:
%scoped {
$font-size: 14px;
$font-size-large: $font-size * 1.1 !global;
}
html {
@extend %scoped;
}
这个可以留着 $font-size 在该块内进行局部拓宽,同时允许其用于得出带有标记的全局变量 !global 旗帜。 这些变量将在您的 SCSS 导入树上提供 .
如果您在您的 SCSS 变量文件中使用这种方法, 您可以提供一个 scss- to- json 选项, 只输出全局变量到 JSON 。 选项以范围占位符的名称为字符串.
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 选项 :
$first-variable: red;
$second-variable: blue;
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 :
{
"firstVariable": "red",
"secondVariable": "blue"
}
返回的值 rename 函数作为-is使用,因此如果不需要更改,请确定返回原名。 虽然如上例所示,这最能用于无损重命名,但如果在JSON重命名后,多个变量是相同的,那么JSON将只包含最后指定的值.
国 际
您还可以使用 CLI scss-to-json <file>。 。 。 .
捐款
欢迎拉动请求。 如果您添加了功能, 请添加单位测试 以盖取之.
许可证
麻省理工学院