Using .css.scss variables in jQuery?

Question

I am working on a Rails 3.1 app and am happily using SASS and CoffeeScript. I particularly like the SASS extensions of variables and imports. I have constructed a single _global-settings.css.scss file which contains ALL of the hex constant values I use throughout all of my stylesheets. This gives me a single place to manage colors, fonts and layout dimensions. Very DRY.

But, if I wish to use JQuery to tweak my css dynamically, I no longer have access to my css compile-time variables, and must reproduce the same data as a JSON hash in a .js.coffee file. Not DRY at all.

Here is my question: Before I go off and build a rake task to munge my css settings file into an equivalent CoffeeScript hash, does anyone have a more clever idea? Like hiding all the values in a hidden div in an html file?

Not sure of this, I believe you can have a constants.yml file where you list your global values. Those can then be inserted into asset files via ERB, I believe. But I haven't tried it myself. — Flambino
– Flambino, Commented Feb 11, 2012 at 19:25
@Flambino: That's the right idea: put the constants in Ruby-land and use ERB to get them into SASS and CoffeeScript. I don't know about constants.yml though, adding a YAML.load_file call during application initialization would be easy enough if it wasn't automatic. — mu is too short
– mu is too short, Commented Feb 11, 2012 at 19:37
@muistooshort The contants-file I remembered from when Sprockets was first introduced; before it became integrated into Rails. But that was quite some time ago, hence the "not sure" in my comment :) — Flambino
– Flambino, Commented Feb 11, 2012 at 19:48
@Flambino: And hence my "don't know ... but" :) I just generated a new 3.1 app and I don't see constants.yml anywhere so that's probably something that got dropped. — mu is too short
– mu is too short, Commented Feb 11, 2012 at 20:10
@muistooshort Yeah, it seems it's been removed. I also just played around in a 3.1 app, but didn't find anything either. Nice answer, by the way — Flambino
– Flambino, Commented Feb 11, 2012 at 20:41

mu is too short · Accepted Answer · 2012-02-11 19:34:10Z

5

You'd have an easier time moving your CSS configuration into Ruby and then sending your _global-settings.css.scss and a small piece of CoffeeScript through ERB. Then you have your settings in place and you can access them everywhere.

Somewhere in Ruby you'd have this:

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

Then rename your _global-settings.css.scss to _global-settings.css.scss.erb and use things like this inside it:

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

And inside a global_settings.js.coffee.erb you could have this:

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

You could even write a simple view helper that would SASSify a Hash:

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

and then you could say this in your _global-settings.css.scss.erb:

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

You could also monkey patch a to_sass into Hash and use CSS_SETTINGS.to_sass but that's probably taking things one step too far.

answered Feb 11, 2012 at 19:34

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

explainer Over a year ago

Thanks for the good ideas. I will study them and make something work.

Collectives™ on Stack Overflow

Using .css.scss variables in jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related