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!

Improve this question
5
  • While I have not tried this before, I am pretty sure this is not supported. I can't find it under interpolation or other applicable sections. Happy coding. Commented May 15, 2011 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. Commented May 15, 2011 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). Commented May 15, 2011 at 18:23
  • Sass::Environment 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 Commented May 15, 2011 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. Commented May 15, 2011 at 18:38

3 Answers 3

Reset to default
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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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 %>
Improve this answer

1 Comment

Thanks for the answer. I'm using sass standalone on Django and .NET MVC projects, but I'll have to try this out.
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);
    }
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.