Merge string and variable to a variable with SASS

sass, variables

Solution

No, you can't have dynamic variables.

From the docs:

You can also use SassScript variables in selectors and property names using #{} interpolation

You can accomplish the same effect using two lists and the `nth()` function.

$products: class1, class2, class3, class4;    
$product_colors: #C00, #00C, #0C0, #000;

$i: 1;
@each $class in $products {
    .page-#{$class} {
        a {
            color: nth($product_colors, $i)
        }
    }
  $i: $i + 1;
}

Also, it might be cleaner to use the `@for` directive:

@for $i from 1 through length($products) {
    .page-#{nth($products, $i)} {
        a {
            color: nth($product_colors, $i)
        }
    }
}

In addition, if you want to define the variables explicitly so you can use them elsewhere, make a list of variables:

$product_class1_color: #C00;
$product_class2_color: #00C;
$product_class3_color: #0C0;
$product_class4_color: #000;

$product_colors: $product_class1_color, $product_class2_color, $product_class3_color, $product_class4_color;

Problem

I want to merge a variable and a string to a new variable, like the following: ``` $product_bodyclass_list: class1 class2 class3 class4; $product_class1_color: #C00; $product_class2_color: #00C; $product_class3_color: #0C0; $product_class4_color: #000; @each $bodyclass in $product_bodyclass_list { .page-#{$bodyclass} { a { color: $product_#{$bodyclass}_color; // This is wrong } } } ``` Does anybody know how to do this?

Original source

Related problems