是否可以使用内插字符串引用变量? [英] Is it possible to reference a variable with an interpolated string?

问题描述

我有一个类别列表，我想从中设置背景颜色.我想将背景颜色的值保留为变量.是否可以通过字符串插值来引用变量?Sass 目前正在使用此代码向我抛出无效的 CSS"错误:

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!

推荐答案

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

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

不是最优雅的解决方案，但它确实为我提供了一个可以在其他几个领域重复使用的 mixin.有没有人看到提高效率的方法?

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?

这篇关于是否可以使用内插字符串引用变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！