0

In the following situation, I would like to combine variables with the loop index (in SCSS):

Predefined variables

$item-width-1:   400px;
$item-height-1:  340px;
$item-spacing-1: 40px;

$item-width-2:   200px;
$item-height-2:  440px;
$item-spacing-2: 100px;

$item-width-3:   300px;
$item-height-3:  240px;
$item-spacing-3: 60px;

For loop:

@for $i from 2 through 3 {

    &:nth-child(#{$i}) {

        .image { width: $item-width-#{$i}; height: $item-height-#{$i}; bottom: $item-spacing-#{$i}; }
        .content { transform: translate(calc(#{$item-width-#{$i}} + 40px), 0); bottom: $item-spacing-#{$i}; }
        .line { height: 108px + $item-spacing-#{$i}; left: $item-width-#{$i} / 2; }

        &.active { width: $item-width-#{$i} + ($content-width + 80px); }

    }
}

But it shows the following error:

Error

Any ideas on how I could fix this?

Thank you in advance!

Stacker
  • 53
  • 5
  • Does this answer your question? [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) – Arkellys Feb 22 '21 at 21:49
  • @Arkellys unfortunately not... – Stacker Feb 23 '21 at 08:39

0 Answers0