我想知道是否可以在Sass和CoffeeScript之间共享ruby哈希,并且最小化。
我四处寻找答案,但没有找到结论。来源,如 文件 对于 萨斯,讨论如何链接相同类型的文件以及如何操作语言中的数据结构,但不要涉及是否可以从其他地方导入数据,或者是否可以在某种程度上解释ruby代码 - 唯一类似的事情我可以想到的是指南针使用.rb文件进行配置。
我的直觉表明这是(或应该)可能的,两种语言都是类似Ruby的,能够解释哈希。
由于这是一个实际问题,我已经多次面对(干预预处理的前端代码,但也为后端处理提供相同的值,例如在HTML模板中生成SVG)但从未真正解决过干净的方式我会接受使用Rails的解决方案。
请注意,我对这个问题非常具体 预编译阶段 前端资产生产,即 萨斯 和 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非常接近......如果这可以工作,那么颜色(或任何其他变量)可以在一个地方定义,然后在任何代码的整个前端和后端使用。
您可以将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
我认为你最好的选择是使用 gon
。 刚 是一个宝石,允许您将ruby变量传递给javascript / coffeescript。从那里你可以内联一个使用ruby哈希的样式。
Sass / CSS实际上只是关于样式,虽然Sass可以有变量并且可以进行数学运算,但是你不应该将它用作更复杂数据结构的存储,这将使你的代码很难维护。数据存储和传输不是Sass的工作。
所以,至于gon。在您的控制器中尝试这样的事情:
gon.ruby_hash = {key: value}
现在在你的coffeescript:
gon.ruby_hash
您可以通过调用gon.ruby_variable_name来访问哈希。