可以将Ruby哈希包含在Sass和CoffeeScript中,以便共享数据吗？

Question

我想知道是否可以在Sass和CoffeeScript之间共享ruby哈希,并且最小化.

我四处寻找答案,但没有找到结论.消息指,如文档的萨斯,谈谈如何在语言中同一类型的链接文件,以及如何操纵数据结构,但不会对数据是否可以从其他地方进口触摸,或Ruby代码是否可以解释在某种程度上 - 我能想到的唯一类似的东西是罗盘使用.rb文件进行配置.

我的直觉表明这是(或应该)可能的,两种语言都是类似Ruby的,能够解释哈希.

由于这是一个实际问题,我已经多次面对(干预预处理的前端代码,但也为后端处理提供相同的值,例如在HTML模板中生成SVG)但从未真正解决过干净的方式我会接受使用Rails的解决方案.

请注意,我对前端资产生产的预编译阶段(即Sass和CoffeeScript)非常具体.涉及CSS,JavaScript或需要浏览器的答案并不是我想要的.

额外的位

我决定添加一个示例,这里有三个与键值对相同​​的数据定义:

红宝石

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

萨斯地图

$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