Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to reference a variable with an interpolated string? [duplicate]

Tags:

sass

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!

like image 742
Brandon Avatar asked May 15 '11 17:05

Brandon


People also ask

Which strings do interpolate variables?

String interpolation is common in many programming languages which make heavy use of string representations of data, such as Apache Groovy, Julia, Kotlin, Perl, PHP, Python, Ruby, Scala, Swift, Tcl and most Unix shells.

How do you use string interpolation?

Structure of an interpolated string You can't have any white space between the $ and the " that starts a string literal. To concatenate multiple interpolated strings, add the $ special character to each string literal. The expression that produces a result to be formatted. String representation of null is String.Empty.

Can we use expressions Inside string interpolation?

String interpolation is a technique that enables you to insert expression values into literal strings.

Which strings do not interpolate variables?

Interpolation: The variable parsing is allowed when the string literal is enclosed with double quotes or with heredocs. Single quoted string or nowdocs, does not supports variable interpolation.


1 Answers

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

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?

like image 141
Brandon Avatar answered Oct 25 '22 23:10

Brandon