11

I have a list of categories, from which I would like to set a background-color. I would like to keep the values for the background colors as variables. Is it possible to reference a variable by string interpolation? Sass is throwing an "Invalid CSS" error on me currently using this code:

/* Category Colors */
$family_wellness_color: #c1d72e;
$lifestyle_color: #f4eb97;
$food_color: #f78f1e;
...

/* Categories */
@each $cat in family_wellness, lifestyle, food
{
    .#{$cat}
    {
        .swatch, .bar
        {
            background-color: $#{$cat}_color;
        }
    }
}

Possible? I would really appreciate some advice!

Brandon Taylor
  • 33,823
  • 15
  • 104
  • 144
  • While I have not tried this before, I am pretty sure this is not supported. I can't find it under [interpolation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_) or other applicable sections. Happy coding. –  May 15 '11 at 17:35
  • Yeah, I'm not coming with a very elegant solution either. I would really prefer not to have to create a class for each categorical color, but I'm leaning toward doing that so I could use @extend .#{$cat}_background_color (or whatever) inside the loop. – Brandon Taylor May 15 '11 at 17:39
  • It may be possible to use @function or write an extension, perhaps (I am fairly certain the variables should be accessible in these contexts). –  May 15 '11 at 18:23
  • [Sass::Environment](http://sass-lang.com/docs/yardoc/Sass/Environment.html) is the context needed; does it happen to be `self` inside a @function? If so, then `var(var($x).value + "_color")` or similar might work –  May 15 '11 at 18:34
  • Hi @pst. I'm using Sass and Compass standalone on a Django project. My Ruby skills are extremely rusty. After some Googling, I did find a couple of examples on how to write custom functions. Given my time constraints, I'm going to have to come back to this later, but I'll post my findings. Thanks, Brandon. – Brandon Taylor May 15 '11 at 18:38

3 Answers3

4

Well, the closest I could get to what I wanted was:

#_variables.scss
/* Categories */
$family_wellness_color: #c1d72e;
$lifestyle_color: #f4eb97;
$food_color: #f78f1e;
$media_entertainment_color: #db3535;
$travel_recreation_color: #e30e61;
$education_color: #92278f;
$sports_color: #0070bb;
$technology_color: #00b5cc;
$products_shopping_color: #028e99;
$companies_businesses_color: #56BA42;

#_mixins.scss
@import 'variables';

@mixin get_category_bkgd_color($category_name)
{
    @if $category_name == family_wellness
    {
        @include bkgd_color($family_wellness_color);
    }
    @else if $category_name == lifestyle
    {
        @include bkgd_color($lifestyle_color);
    }
    @else if $category_name == food
    {
        @include bkgd_color($food_color);
    }
    @else if $category_name == media_entertainment
    {
        @include bkgd_color($media_entertainment_color);
    }
    @else if $category_name == travel_recreation
    {
        @include bkgd_color($travel_recreation_color);
    }
    @else if $category_name == education
    {
        @include bkgd_color($education_color);
    }
    @else if $category_name == sports
    {
        @include bkgd_color($sports_color);
    }
    @else if $category_name == technology
    {
        @include bkgd_color($technology_color);
    }
    @else if $category_name == products_shopping
    {
        @include bkgd_color($products_shopping_color);
    }
    @else if $category_name == companies_businesses
    {
        @include bkgd_color($companies_businesses_color);
    }
}

#dashboard.scss
@import 'variables', 'mixins';

@each $cat in family_wellness, lifestyle, food, media_entertainment, travel_recreation, education, sports, technology, products_shopping, companies_businesses
{
    .#{$cat}
    {
        .swatch, .bar
        {
            @include get_category_bkgd_color($cat);
        }
    }
}

Not the most elegant solution, but it does get me a mixin I can re-use in several other areas. Does anyone see a way to make this more efficient?

Brandon Taylor
  • 33,823
  • 15
  • 104
  • 144
3

With Rails 3.1, you can create templates like this: screen.css.scss.erb - it comes with all the goodness of scss and erb.

<% [...].each do |category_name| %>
  @include bkgd_color($<%= category_name %>_color);
<% end %>
Ramon Tayag
  • 15,224
  • 9
  • 43
  • 69
2

.html:

<ul>
    <li class="family"></li>
    <li class="life"></li>
    <li class="food"></li>
</ul>

.scss:

$family_color: #c1d72e;
$life_color: #f4eb97;
$food_color: #f78f1e;

// solution 1 - using direct (key, value) pair
@each $cat, $cat_var in (family, $family_color), (life, $life_color), (food, $food_color) {
    .#{$cat} {
        background-color: $cat_var;
    }
}

// solution 2 - using nth function 
@each $cat in (
    family $family_color,
    life $life_color,
    food $food_color) {
      .#{nth($cat, 1)} {
          background-color: nth($cat, 2);
      }
}

// solution 3 - using sass map
$colors: (
    family_color: #c1d72e,
    life_color: #f4eb97,
    food_color: #f78f1e
);

@function color($key){
    @if map-has-key($colors, $key){
        @return map-get($colors, $key);
    }
}

@each $color in family, life, food{
    .#{$color}{
        background-color: color(#{$color}_color);
    }
}
QQ_Bee
  • 21
  • 4