Sass, color schemes with bootstrap

1
votes

i read this article http://www.sitepoint.com/dealing-color-schemes-sass/ and I wanted to try to apply the method but I've a question: It's possible use this with a variable?

Ex. I use bootstrap and i wanna change only value (without assign a property) for $brand-primary, can i change this value with this method?

I've assigned a dynamic class on my body ( or ), and i wanna change a $brand-primary value for every class...

Another Ex. If body class is "en" $brand-primary: red; if body class is "it" $brand-primary: blue; if body class is "fr" $brand-primary: green;

It's possible?

Thanks for your reply.

1
twitter-bootstrap-3sass

1 Answers

0
votes

Perhaps the cleanest way to accomplish this is to create a mixin, and then pass in theme color variables.

The theme mixin code takes in all necessary colors, as well as a name that corresponds to the body class:

@mixin theme($name, $brand-primary) {
  body.#{$name} {
    background-color: $brand-primary;
  }
}

Create a separate Sass partial for housing your theme color variables. In this case, it would look something like this:

$brand-primary: green;

Create as many of these files as you have themes.

Using the themes is then as simple as:

@import 'Themes/_theme-name.scss';
@include theme("theme-name", $brand-primary);

Bonus - if you need to apply styles to a specific theme, it's as easy as an @if statement in the mixin:

@if ($name == "theme-name") {
  .class-name {background-image: url(example.png);}
}