LESS SCSS MIXIN конверсия

Question

Кузовные работы могут быть .m01, .m02, .m03, .m04 в зависимости от цветового разрыва для раздела страниц. Я пытаюсь преобразовать LESS в SCSS, но у меня возникли проблемы с преобразованием микширования ниже.

//-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

Хотя ответ, представленный RaisingAgent, является достаточно хорошим подходом, он не научит вас, как это делать в Sass, или помочь вам понять, как работает Sass. Этот ответ поможет вам в этом.

В отличие от Less, Sass не позволяет вам получить доступ к переменной, имя которой динамически создается путем интерполяции (переменная @col_lvl_01_multi). Вам нужно будет использовать списки и функцию nth.

Sass также имеет встроенную директиву @for, которая может использоваться для создания циклов, и поэтому нет необходимости имитировать цикл for, используя mixin. Таким образом, ваш код может быть преобразован в Sass следующим образом:

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

Answer 2

На большинстве сайтов Код сниппет хозяевах вы можете «Конвертировать»/«Compile» любой вид кода CSS в обычном CSS(3). Я всегда использую Codepen, а затем CSS to SCSS converter. В вашем случае я бы просто преобразовал его по частям. (На Codepen вам нужно нажать на маленькую кнопку ⚙ и установить CSS Preprocessor).