Access the iterator and append it to variable name in SASS

Question

I'm quite new to sass. I'm defining 14 different variables $skill-1, $skill-2 etc. with different values and calling a mixin to different widths to different IDs.

I'm getting an error

Undefined variable: "$skill-".

Here's my code sample.

@mixin skill-func($val) {
       & { width : $val; }
    }
    $i: 14;
    @while $i > 0 {
      #skill-#{$i} { 
            @include skill-func ($skill-#{$i})
       }
      $i: $i - 1;
    }

Answer 1

Unfortunately you can not dynamically call a variable like that (there is no variable interpolation - see examples of string interpolations here).

But you could save all your 14 values in a list and then call the respective item using the nth() function. Something along these lines:

$skill: 12px, 23px, 42px, 234px, 440px;

@mixin skill-func($val) {
   & { width : $val; }
}

$i: 5;

@while $i > 0 {
  #skill-#{$i} { 
        @include skill-func (nth($skill, $i))
   }
  $i: $i - 1;
}

DEMO

Alternatively a map could be used (then you can also use keys that are not numbers and can generate semantically more meaningful ids - when that makes more sense).

$skill: (supernarrow:12px, narrow:23px, normal:42px, wide:234px, superwide:440px);

@mixin skill-func($val) {
   & { width : $val; }
}

@each $key, $i in $skill {
  #skill-#{$key} { 
        @include skill-func ($i);
   }
}

DEMO