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

Question

我想知道是否可以在 Sass 和 CoffeeScript 之间轻松共享 ruby​​ 哈希。

我四处寻找这个问题的答案，但没有找到任何结论。来源，例如 documentation对于Sass , 谈论如何链接相同类型的文件以及如何在语言内操作数据结构，但不要触及是否可以从其他地方导入数据，或者是否可以以某种方式解释 ruby​​ 代码——我唯一类似的事情可以想到的是 compass 使用 .rb 文件作为它的配置。

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

因为这是一个实际问题，我遇到过好几次(干掉预处理的前端代码，但也为后端处理提供相同的值，例如在 HTML 模板中生成 SVG)但从未解决以一种非常干净的方式，我会接受涉及使用 Rails 的解决方案。

请注意，我非常具体地说明了前端 Assets 生产的预编译阶段，即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

您可以将您的 CoffeeScript 和 SASS 转换为将被预处理的 ERB 模板(因此您可以在其中使用所有很棒的 Ruby 可能性)。有一篇小文章对此进行了描述: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