css - LESS SCSS MIXIN 转换

Question

body 类别可能有 .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 指令，可用于创建循环，因此无需使用 mixin 来模拟 for 循环。因此，您的代码可以按如下方式转换为 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.
  }
}