LESS SCSS MIXIN conversion

Question

Body classes may have .m01, .m02, .m03, .m04 depending on the colour break for the section of the pages. I am trying to convert LESS into SCSS, but I am having trouble converting the mixing below.

//-LESS
//-Sample colours
@m01_col_lvl_01: red;
@m02_col_lvl_01: green; 
@m03_col_lvl_01: blue; 
@m04_col_lvl_01: black; 


//- start colour mixin loop
.module_colours(4);
.module_colours(@n, @i: 1) when (@i =< @n) {

//-colours
@col_lvl_01_multi: "m0@{i}_col_lvl_01";

.m0@{i} #site-name {
    background-color:@@col_lvl_01_multi;
}

//- end colour mixin loop
.module_colours(@n, (@i+1));
}

Answer 1

While the answer provided by RaisingAgent is a reasonably good approach, it wouldn't teach you how to do this thing in Sass or help you understand how Sass works. This answer will help you with that.

Unlike Less, Sass does not allow you access a variable whose name is dynamically created through interpolation (the @col_lvl_01_multi variable). You will have to make use of lists and nth function for this.

Sass also has an in built @for directive which can be used to create loops and so there is no need to mimic the for loop using a mixin. So, your code can be converted to Sass as follows:

$m_col_lvl_01_list: red green blue black; // the list

@for $i from 1 through 4 { // the loop
  .m0#{$i} #site-name { // interpolated selector name
    background-color: nth($m_col_lvl_01_list, $i); //nth function to access the value based on for loop index.
  }
}