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!
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.
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.
String interpolation is a technique that enables you to insert expression values into literal strings.
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With