是否可以使用插值字符串引用变量？ [复制]答案

【问题标题】：Is it possible to reference a variable with an interpolated string? [duplicate]是否可以使用插值字符串引用变量？ [复制]
【发布时间】：2011-08-25 23:37:54
【问题描述】：

我有一个类别列表，我想从中设置背景颜色。我想将背景颜色的值保留为变量。是否可以通过字符串插值来引用变量？ Sass 目前正在使用此代码向我抛出“无效 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;
        }
    }
}

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

【问题讨论】：

虽然我之前没有尝试过，但我很确定这不受支持。我在interpolation 或其他适用部分下找不到它。编码愉快。
是的，我也没有提供非常优雅的解决方案。我真的不想为每种分类颜色创建一个类，但我倾向于这样做，所以我可以在循环中使用 @extend .#{$cat}_background_color （或其他）。
也许可以使用@function 或编写扩展名（我相当肯定这些变量应该可以在这些上下文中访问）。
Sass::Environment 是需要的上下文；它是否恰好是@function 中的self？如果是这样，那么var(var($x).value + "_color") 或类似的可能会起作用
嗨@pst。我在 Django 项目中独立使用 Sass 和 Compass。我的 Ruby 技能非常生疏。在谷歌搜索之后，我确实找到了一些关于如何编写自定义函数的示例。鉴于我的时间限制，我稍后将不得不回到这个问题，但我会发布我的发现。谢谢，布兰登。

标签： sass

【解决方案1】：

嗯，最接近我想要的是：

#_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。有没有人想办法提高效率？

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答。我在 Django 和 .NET MVC 项目上独立使用 sass，但我必须尝试一下。

【解决方案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);
    }
}

【讨论】：