是否可以使用插值字符串引用变量？

我有一个类别列表，我想从中设置背景颜色。我想保留背景颜色的值作为变量。是否可以通过字符串插值来引用变量？ Sass在我目前使用这段代码时抛出了一个“Invalid CSS”错误：是否可以使用插值字符串引用变量？

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

可能吗？我真的很感激一些建议！

来源

2011-05-15 Brandon

虽然我还没有尝试过这个，我敢肯定，这是不支持的。我无法在[插入]（http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_）或其他适用部分下找到它。快乐的编码。 – 2011-05-15 17:35:15

是的，我也没有提供非常优雅的解决方案。我真的不希望为每个分类颜色创建一个类，但我倾向于这样做，所以我可以在循环中使用@extend。{{cat} _background_color（或其他）。 – Brandon 2011-05-15 17:39:51

也许可以使用@function或者写一个扩展，也许（我相当确定这些变量应该可以在这些上下文中访问）。 – 2011-05-15 18:23:38

嗯，我能得到我想要的东西最接近的是：

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

不是最完美的解决方案，但它确实让我一个mixin我可以重新使用在其他几个方面。有没有人看到一种方法来提高效率？

来源

2011-05-15 18:24:14 Brandon

使用Rails 3.1，您可以创建如下模板：screen.css.scss.erb - 它带有scss和erb的所有优点。

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

来源

2011-09-08 11:13:09

感谢您的回答。我在Django和.NET MVC项目上使用了sass standalone，但我必须尝试一下。 – Brandon 2011-09-08 12:50:03

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

来源

2014-06-04 10:24:06

是否可以使用插值字符串引用变量？

回答

相关问题