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

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 中，然后_global-settings.css.scss通过 ERB 发送您的一小部分 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] %>';
// ...

在 a 里面global_settings.js.coffee.erb你可以有这个：

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

您甚至可以编写一个简单的视图助手来 SASSify 哈希：

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 %>

您也可以将 a 修补to_sass到 Hash 中并使用CSS_SETTINGS.to_sass，但这可能有点太过分了。