Czy możliwe jest odniesienie do zmiennej z interpolowanym ciągiem znaków?

Question

Mam listę kategorii, z których chciałbym ustawić kolor tła. Chciałbym zachować wartości dla kolorów tła jako zmiennych. Czy możliwe jest odwołanie się do zmiennej za pomocą interpolacji ciągów? Sass jest rzucanie się „Nieprawidłowy CSS” błąd na mnie obecnie za pomocą tego kodu:

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

możliwe? Byłbym wdzięczny za radę!

Answer 1

Cóż, najbliżej mogłem dostać się do tego, co chciałem było:

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

Nie jest to najbardziej eleganckie rozwiązanie, ale robi się mi mixin mogę ponowne wykorzystanie w kilku innych dziedzinach. Czy ktoś widzi jakiś sposób, aby uczynić to bardziej wydajnym?

Answer 2

Z Rails 3.1 można tworzyć szablony takie jak: screen.css.scss.erb - przychodzi z całą dobrością scss i 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); 
    } 
}