output multiple variant css files

Skip to first unread message

Ryan Shaw

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

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

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

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


    color: blue;
        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

Apr 7, 2014, 1:20:34 PM4/7/14
to compas...@googlegroups.com
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

Reply all
Reply to author
0 new messages