LESS SCSS MIXIN conversion

问题

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));
}

回答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.
  }
}

回答2:

On most Code snippet host sites you can 'Convert' / 'Compile' any kind of CSS code into normal CSS(3). I always use Codepen and then a CSS to SCSS converter. In your case, I'd just convert it in parts. (On Codepen, you have to click on the small ⚙ button and set your CSS Preprocessor).

来源：https://stackoverflow.com/questions/41587378/less-scss-mixin-conversion

标签

css

Sass

less