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指令，可用于创建循环，因此不需要使用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.
  }
}

Answer 2

在大多数代码段主机网站上，您可以转换＆＃39; /＆＃39;编译＆＃39;普通CSS(3)中的任何类型的CSS代码。我总是使用Codepen然后使用CSS to SCSS converter。在您的情况下，我只是将其转换为部分。（在Codepen上，您必须点击小的⚙按钮并设置CSS Preprocessor）。

较少的SCSS MIXIN转换

2 个答案: