Elegant way to send different CSS to different users

[Matthew Lancellotti]

I have an interesting issue.  I am offering different color scheme options to users.  I need an elegant way to deliver this.

Here is a proposed solution...

_color_scheme_1.scss

// file contents:

$search-bar: blue;

_color_scheme_2.scss

// file contents:

$search-bar: red;

_other_files.scss

// file contents (this and similar files will draw from the color scheme color palettes as necessary):

.search-bar {

    border: 4px solid;

    border-color: $search-bar;

}

_main_1.scss

// file contents:

@import 'color_scheme_1'

@import 'other_files'

_main_2.scss

// file contents:

@import 'color_scheme_2'

@import 'other_files'

So I'm creating a separate *main* file for each color scheme.  The only difference between each main file is which color scheme file it imports.  The webserver will then deliver the appropriate CSS file to the user depending on their color scheme preferences.

This solution WORKS, but I can easily think of two caveats...

1. It's a little annoying I need a separate main file for each color scheme.  If I have 10 color schemes, for example, then I need 10 files.  Moreover, if I wanted to offer users another custom style option, like STYLE SCHEMES in addition to color schemes, and say there were 7 different style schemes, then there is a total of 7 * 10 = 70 different combinations.  So if I used the same strategy, then I would have 70 different main files!

2. If a user changes their color preferences after the site loads, then I'll have to send them an entirely new *main* file.  This feels inefficient.  I wish I could just send them the color related stuff and not the whole thing.

Is there a better way??

[Brandon Rubenstein]

You should only need one main file, but change the value of your variables. That's the power of a variable!

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

[Brandon Rubenstein]

I sent too soon. You only need to change the variables. Check out this CodePen from HTML5 Weekly, which shows how to Update CSS Variables with JS (http://codepen.io/wesbos/pen/adQjoY?editors=0110).

Sincerely,

Brandon