output multiple variant css files

189 views
Skip to first unread message

Ryan Shaw

unread,
Mar 21, 2014, 6:33:26 PM3/21/14
to compas...@googlegroups.com
I've been looking all over and haven't found a solution so I'll try here:

in my project (canvas-lms), we want to start phasing in a UI overhaul (and at the same time, enabling users to turn on a 'high-contrast' setting, for those individuals who have a hard time seeing/reading the 'normal' versions). The thing is, it is something that needs to be opt-in-able on a per-user/account basis.  So, the idea is the sass files will look like:

@if $use_new_styles {
  color: red;
} @else {
  color: green;
}
@if $use_high_contrast {
  font-weight: bold;
}
@if $use_new_styles  && $use_high_contrast {
  font-size: 30px;
}

And then for every sass file, we'd compile it 4 different times, passing in a different environment variable each time to set the $use_new_styles and $use_high_contrast variables accordingly (like in in this SO: http://stackoverflow.com/questions/15819828/different-sass-coffeescript-variable-values-based-on-build). So the net result is if we had an input file 'foo.scss' we'd have output files of 'foo.css', 'foo_newstyle.css', 'foo_highcontrast.css', and 'foo_newstyle_highcontrast.css'

we'd then, at run time, for a given user, load the correct one of those 4 css files depending on the user's settings.

The reason we have to create 4 different files is because it is a per-user setting, so if there were 2 people browsing the same site at the same time, one might be seeing 'foo.css' and the other might be seeing 'foo_newstyle.css'. so the different 'variants' are made at deploy time, not on the server.

any suggestions on how to do this? either as part of the compass-rails integration or by just using a custom rake task or watcher like compass-guard?

Ryan Shaw

unread,
Apr 2, 2014, 1:10:12 PM4/2/14
to compas...@googlegroups.com
Sorry, this is still stumping me. Anyone have any suggestions?

Andrés gutiérrez

unread,
Apr 3, 2014, 4:16:36 PM4/3/14
to compas...@googlegroups.com

Why not a class in the  BODY that changes the styles:

Ex.:

.my-style
    color: blue;
body.foo-styles-theme
    .my-style
        color : red;

Sorry if I'm missing something

--
You received this message because you are subscribed to the Google Groups "Compass" group.
To unsubscribe from this group and stop receiving emails from it, send an email to compass-user...@googlegroups.com.
To post to this group, send email to compas...@googlegroups.com.
Visit this group at http://groups.google.com/group/compass-users.
For more options, visit https://groups.google.com/d/optout.

Jack Westbrook

unread,
Apr 7, 2014, 1:20:34 PM4/7/14
to compas...@googlegroups.com
Hey,
I'm  with andresgutgon - a class on the body would probably be the best solution. However if you're REALLY keen on producing different files then take a look at this quick demo I put together.
It's not quite as complex as what that stackoverflow link was discussing but it should work... http://sassmeister.com/gist/10024408

Cheers,
Jack
Reply all
Reply to author
Forward
0 new messages