Ruby 哈希可以包含在 Sass 和 CoffeeScript 中，从而允许共享数据吗？

Question

我想知道 ruby 散列是否可以在 Sass 和 CoffeeScript 之间共享，而无需大惊小怪。

我四处寻找答案，但没有找到任何结论。来源，例如documentation for Sass，谈论如何link相同类型的文件以及如何在语言内操作数据结构，但不涉及是否可以从其他地方导入数据，或者ruby 代码是否可以某种方式解释 - 我能想到的唯一类似的事情是指南针使用 .rb 文件作为它的配置。

我的直觉表明这是（或应该）可能的，两种语言都类似于 Ruby 并且能够解释哈希值。

因为这是一个实际问题，我遇到过好几次（DRYing up pre-processed front end code，但也为后端处理提供相同的值，例如在 HTML 模板）但从未以真正干净的方式解决我会接受涉及使用 Rails.

的解决方案

请注意，我对前端资产生产的预编译阶段非常具体，即Sass 和 CoffeeScript。涉及 CSS、JavaScript 或需要浏览器的答案不是我要找的。

额外位

我决定添加一个示例，这里是相同数据的三个定义作为键值对：

Ruby

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours[:brandBackground]

Sass Map

$colours: ( brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' )
map-get($colours, brandBackground)

CoffeeScript

colours = { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
colours.brandBackground

Coffeescript 和 Ruby 哈希定义是相同的，Sass 非常接近......如果这可行，那么颜色（或任何其他变量）可以在一个地方定义然后在整个过程中使用前后端任意代码

Answer 1

我认为最好的选择是使用 gon。 Gon 是一个 gem，允许您将 ruby 变量传递给 javascript/coffeescript。从那里您可以内联使用 ruby 散列的样式。

Sass/CSS 实际上只是关于样式，虽然 Sass 可以有变量和做数学运算，但你不应该将它用作更复杂数据结构的存储，这会让你编码很难维护。数据存储和传输不是 Sass.

的工作

所以，至于坤。在你的控制器中尝试这样的事情：

gon.ruby_hash = {key: value}

现在在你的 coffeescript 中：

gon.ruby_hash

您可以通过调用 gon.ruby_variable_name.

来访问哈希

Answer 2

您可以将您的 CoffeeScript 和 SASS 转换为将被预处理的 ERB 模板（因此您可以在其中使用所有很棒的 Ruby 的可能性）。有一点 post 描述了这一点：https://robots.thoughtbot.com/dont-repeat-your-ruby-constants-in-javascript.

更新

将此代码添加到 lib/shared_assets_data.rb:

module SharedAssetsData
  def self.colors_hash
    { brandBackground: '#f00', brandForeground: '#00f', brandText: '#0f0' }
  end

  def self.sassify(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('( ').concat(' )')
  end

  def self.coffefy(hash)
    hash.map do |key, value|
      "#{key}: '#{value}'"
    end.join(', ').prepend('{ ').concat(' }')
  end
end

然后启用自动加载 lib 目录将此行添加到 config/application.rb:

config.autoload_paths += %W(#{Rails.root}/lib)

之后您可以执行以下操作：

# screen.sass.erb
$colours: <%= SharedAssetsData.sassify(SharedAssetsData.colors_hash) %>
body
  background: map-get($colours, brandBackground)

# screen.coffee.erb
colours = <%= SharedAssetsData.coffefy(SharedAssetsData.colors_hash) %>
console.log colours.brandBackground

Ruby 哈希可以包含在 Sass 和 CoffeeScript 中，从而允许共享数据吗？

Can Ruby hashes be included in Sass and CoffeeScript, allowing data to be shared?

ruby-on-rails

ruby

coffeescript

sass

compass-sass