last day (14 days later) » 

10:11 AM
0
Q: How to use Rails and SASS to generate a stylesheet that only contains specific rules

cranderveldtI've looked around for someone else trying to do something like that, but I haven't been able to find it. Here goes: I have a CMS where users are able to select HEX color values for six specific colors. They're saved in the db (like site.color_1 for example). The problem is, I can't pull these D...

 
I'm a little unclear about what exactly your goal is, but it sounds like you could use SCSS variables for that? Create a .scss.erb file, define the variables there, e.g. $color1: <%= site.color_1 %> and only reference $color1 in the rest of your stylesheets.
 
That would work if the .scss.erb file compiles into a .css.erb file, and preserves the rails block, but I didn't think it did that. If it does this is a solved problem. I'll check it out now.
 
If you want to use SCSS variables, it cannot be compiled to CSS. Instead, you need to use SCSS import directives to include them in your other files (and they need to be css.scss.erb files as well for that to work): @import 'variables';
 
I've got _colors.css.scss.erb which looks like this: $link-default: <%= @color_test %>; but when I @import that into my SCSS file, it just throws a SASS syntax error: Sass::SyntaxError ... Invalid CSS after "$color1: ": expected expression (e.g. 1px, bold), was ";"
 
It has to be just _colors.scss.erb - compiling it to CSS wouldn't do any good if it only contains SCSS variables. In CSS, it's just an empty file.
That probably means that @color_test is nil. Where'd you try to define it? Assets are not parsed in your view context, so you do not have access to variables you set in your controller action.
 
10:11 AM
I've got the current pgae controller set up with @color_test = 'green'. $color1: <%= @color_test || 'black' %>; works and renders black, but if I take out the || 'black' then it throws the same error, probably like you said because it's evaluating to nil.
One more note, I only got this working up to this point because I added '*.css.erb' to my config.assets.precompile array in the development.rb env file.
 
It doesn't have to be precompiled
Only the locations where you @import that file have to be
 
whoa, seriously? that's pretty cool, let me give that a go
 
Let's say for simplicities' sake that you only have an application.css.scss
 
sure
 
After the Asset pipeline *= require statements, include the @import 'colors;` statement
 
10:18 AM
yep
 
So now Rails goes to compile your application.css.scss file
 
where colors is _colors.scss.erb
 
Right
Sprockets goes out and concatenates all the *= require files on top of the resulting application.css file
It then runs it through SCSS
Which finds the @import and makes the variables available to all SCSS instructions that come after it
And therein lies the rub:
do you have any other stylesheets that you require through *= require that need these variables?
 
Then this won't work as it is
 
10:21 AM
i import _colors first, then import the rest of my files in other _whatever.scss files after
yeah the thing i'm getting hung up on is
if i set up _colors as
$color1: <%= @color_test || 'black' %>;
 
Right, but you cannot use Sprockets *= require for that anymore
 
and then i have
.color-test h1 {
color: $color1;
}
what i really want is for the rendered css to be
.color-test h1 {
color: <%= @color_test || 'black' %>;
}
and i don't think rails can do that
or sass, rather
 
No, it's an ERB statement, so SASS can't help you there
But SASS variables would get you there
 
right, but if sass can render a .css.erb file
then that should render on pageload, right?
 
All you have to do is convert your Sprockets *= require statements into SASS @import statement
SASS cannot render ERB
 
10:24 AM
the only require statement i have right now is *= require_self
 
Two completely different stages
 
the other ones are depend_on
*= depend_on ./_colors
*= depend_on ./_basic
*= depend_on ./_utility
*= depend_on ./_layout
*= depend_on ./_pages
etc
 
Never used that
> depend_on path declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset's cache in response to a change in another file.
So if it's not included in application.css, how do you get it into the browser?
Are they all declared in config.assets.precompile and loaded in the browser as separate files?
 
no i'm using @import
for all the sass partials
well you've given me a lot of new info on this
 
Ah
 
10:28 AM
i'm gonna take a few hours to test out what other options i have
 
So you're using
*= depend_on ./_colors
*= depend_on ./_basic
*= depend_on ./_utility
*= depend_on ./_layout
*= depend_on ./_pages

@import 'colors';
@import 'basic';

and so on?
Then you should be all set
 
exactly
 
Great. Whatever you end up doing, I urge you to give color management in SASS a serious, long look, because it allows you to do awesome things
 
yeah, i mean i already use tons of color variables
 
Stuff like $link_color: #ff0000;
 
10:31 AM
it's just that these variables are defined by me
and i need to have user-defined colors
to overwrite my rules
 
$link_hover_color: lighten($link_color, 10%)
 
yeah
thanks so much for your help
 
But wasn't the whole point of the exercise to do that? I'm a bit confused
Sure thing
 

last day (14 days later) »