Sass：如何将JSON文件直接解码为Sass变量？

Question

可以使用Node-Sass解码JSON文件吗？

例如：

@import "../data/data.json";

我需要将这些数据直接迭代到一个变量中。

欢迎任何帮助 :)

- Raul

---

@import "../data/data.json"; 只应该用于导入 sass 文件。为什么它会神奇地解码 json？尝试使用 Ruby 来为您解码 json，然后将其导入到 sass 中。 - agconti

@agconti 是的，我的例子有点疯狂，但是用 Ruby 如何解码？ - Raul

Answer 1

sass-json-vars 是一个很好的宝石，但无法与 node-sass 配合使用（这是原问题的要求）。

相反，尝试使用 node-sass-json-importer ，本质上是相同的内容，只是重新设计以适应 node-sass 的导入器api。

- Stiggler

Answer 2

有一个名为Sass JSON Vars的 gem，可以完全满足你的需求。

你可以使用以下命令行代码安装这个 gem：

gem install sass-json-vars

Sass JSON变量的使用方法

适用于使用Sass版本>= 3.3的项目

将变量放入JSON文件中：

// variables.json
{
    "font-sans": "Helvetica, sans-serif",
    "colors": {
        "red": "#c33"
    }
}

导入Sass文件以公开变量名称：

@import "variables.json"

body {
    color: map-get($colors, red);
    font: $font-sans;
}

需要在编译时引入sass-json-vars：

sass style.scss -r sass-json-vars

---

对于使用Sass <= 3.2的项目

将变量放置在JSON文件中:

// variables.json
{
    "font-sans": "Helvetica, sans-serif",
    "colors-red": "#c33"
}

将文件导入Sass以公开变量名称：

@import "variables.json"

body {
    color: $colors-red;
    font: $font-sans;
}

在编译时需要使用sass-json-vars：

sass style.scss -r sass-json-vars

---

更多信息：

• 该项目的 Github 页面
• 使用 JSON 在 Sass 和 JavaScript 之间共享数据

- John Slegers

---

当使用Compass时，我该如何实现这个？ - Batandwa

@Batandwa：据我所知，你需要考虑的只是你正在使用哪个版本的Sass。无论你是否使用Compass都不应该有影响。如果所描述的过程对你不起作用，你可能需要联系开发团队@http://viget.com/或在https://github.com/vigetlabs/sass-json-vars/issues上打开一个问题。 - John Slegers

不解析 . 和 :（因此您无法包含URL或对其他资产的引用）。在类似于 { "img": "https://cloudfront.com/foo/bar.jpg" } 的内容上中断。 - Daniel Lizik

@Daniel_L：你应该在 https://github.com/vigetlabs/sass-json-vars/issues 上记录这个问题。 - John Slegers

@JohnSlegers 这个问题自从11月份就一直未解决哈哈... https://github.com/vigetlabs/sass-json-vars/issues/23 - Daniel Lizik

Answer 3

我不太确定你该如何做，但这里有一个很好的例子，展示了如何将自定义的 Ruby 函数添加到 Sass 中：

https://gist.github.com/chriseppstein/1561650

这里有一个关于如何解析JSON的例子：

在Ruby中解析JSON字符串

把它们结合起来后，你或许可以做出类似这样的效果：

module Sass::Script::Functions
  def json(Sass::Script::String)
    require 'rubygems'
    require 'json'
    JSON.parse(string)
  end
end

将其添加到您的config.rb文件的末尾，并确保您已安装了json ruby gem。

gem install json

并运行：

compass compile --force

为了让所有东西都能正常工作。

* 显然这是未经测试的，不能正常工作，但它可能会帮助你到达你需要去的地方。

- agconti

---

@Raul 你需要使用Grunt编译Sass，并使用require:'/path/to/script.rb'（相对于项目根目录）引入你的自定义ruby脚本。 - Даниил Пронин