Question

我正在使用Rails 3.1应用程序，并且很高兴使用SASS和CoffeeScript。我特别喜欢变量和导入的SASS扩展。我构建了一个_global-settings.css.scss文件，其中包含我在所有样式表中使用的所有十六进制常量值。这为我提供了一个管理颜色，字体和布局尺寸的地方。非常干。

但是，如果我希望使用JQuery动态调整我的css，我不再能够访问我的css编译时变量，并且必须在.js.coffee文件中重现与JSON哈希相同的数据。根本不干。

这是我的问题：在我开始构建rake任务以将我的css设置文件转换为等效的CoffeeScript哈希之前，是否有人有更聪明的想法？比如隐藏html文件中隐藏div中的所有值？

Answer 1

您可以更轻松地将CSS配置移动到Ruby中，然后通过ERB发送_global-settings.css.scss和一小块CoffeeScript。然后，您已准备好设置，并且可以随处访问它们。

在Ruby的某个地方，你有这个：

CSS_SETTINGS = {
    :text_color        => '#333',
    :text_color_hilite => '#f33',
    :font_size         => '14px',
    #...
}

然后将您的_global-settings.css.scss重命名为_global-settings.css.scss.erb并在其中使用此类内容：

$text-color: '<%= CSS_SETTINGS[:text_color] %>';
// ...

在global_settings.js.coffee.erb内你可以拥有：

window.app.global_settings = <%= CSS_SETTINGS.to_json.html_safe %>

你甚至可以编写一个简单的视图助手，它可以使SASS化哈希：

def sassify(h)
    h.map do |k, v|
        # You might want more escaping for k and v in here, this is just
        # a simple proof of concept demo.
        [ '$', k.to_s.gsub('_', '-'), ': ', "'#{v}'", ';' ].join
    end.join("\n")
end

然后你可以在_global-settings.css.scss.erb：

中说出来

// Import global CSS settings.
<%= sassify(CSS_SETTINGS).html_safe %>

您也可以将to_sass修补为Hash并使用CSS_SETTINGS.to_sass，但这可能会让事情走得太远。

在jQuery中使用.css.scss变量？

1 个答案: