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

- Laurence L

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

- Harry

---

谢谢Harry。我有很多关于SASS需要学习的。我正在从LESS转向SASS，因为Bootstrap在4.0版本中停止支持LESS。现在我有了这个比较，我可以开始深入学习了。 - Laurence L

是的，我已经预料到那会是原因了，不客气。很高兴能帮忙 :) - Harry

Answer 2

在大多数代码片段托管网站上，您可以将任何类型的CSS代码“转换”/“编译”为普通的CSS(3)。我经常使用Codepen，然后使用CSS to SCSS converter进行转换。在您的情况下，我只会分部分进行转换。(在Codepen上，您必须点击小⚙按钮并设置您的CSS预处理器)。

- Penguin9

---

我不知道这个。谢谢RaisingAgent。我会试一下的。 - Laurence L