LESS SCSS MIXIN 转换答案

【问题标题】：LESS SCSS MIXIN conversionLESS SCSS MIXIN 转换
【发布时间】：2017-05-26 00:53:56
【问题描述】：

正文类可能有.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));
}

【问题讨论】：

标签： css sass less

【解决方案1】：

在大多数 Code sn-p 主机站点上，您可以将任何类型的 CSS 代码“转换”/“编译”成普通的CSS(3)。我总是使用Codepen，然后是CSS to SCSS converter。在你的情况下，我只是将它部分转换。（在 Codepen 上，您必须点击小 ⚙ 按钮并设置您的 CSS Preprocessor）。

【讨论】：

我不知道。感谢RaisingAgent。我会试一试。

【解决方案2】：

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

【讨论】：

谢谢哈利。关于 SASS，我有很多东西要学。我正在从 LESS 迁移到 SASS，因为 Bootstrap 在版本 4 中放弃了对 LES 的支持。现在我有了这个比较，我可以陷入困境。
是的，我原以为这是原因，不客气。乐于助人:)