¿Es posible hacer referencia a una variable con una cadena interpolada?

Question

Tengo una lista de categorías, desde la que me gustaría establecer un color de fondo. Me gustaría mantener los valores de los colores de fondo como variables. ¿Es posible hacer referencia a una variable por interpolación de cadenas? Sass está lanzando un error "no válido CSS" en mí que utilizan actualmente este código:

/* 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; 
     } 
    } 
} 

Posible? ¡Realmente agradecería algunos consejos!

Answer 1

Bueno, lo más cerca que podía llegar a lo que quería era:

#_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); 
     } 
    } 
} 

No es la solución más elegante, pero sí me mixin puedo reutilizar en otras áreas. ¿Alguien ve la manera de hacer esto más eficiente?

Answer 2

Con Rails 3.1, puede crear plantillas como esta: screen.css.scss.erb - viene con todas las bondades de scss y erb.

<% [...].each do |category_name| %> 
    @include bkgd_color($<%= category_name %>_color); 
<% end %> 

Answer 3

.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); 
    } 
}