CODEWITHSUNDEEP
csssassless
Laurence L
Laurence L

Reputation: 623

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

Upvotes: 3

Views: 1022

Answers (2)

Penguin9
Penguin9

Reputation: 481

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).

Upvotes: 1

Harry
Harry

Reputation: 89780

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

Upvotes: 3

Related Questions