减去SCSS混音转换
减去SCSS混音转换
提问于 2017-01-11 09:44:30
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));
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-11 10:39:08
虽然RaisingAgent提供的答案是一个相当好的方法，但它不会教您如何在Sass中完成这个任务，也不会帮助您理解Sass的工作原理。这个答案会对你有所帮助。
与更少的不同，Sass不允许您访问通过内插( @col_lvl_01_multi变量)动态创建的变量。为此，您必须使用列表和nth函数。
Sass还有一个内置的@for指令，它可以用来创建循环，因此不需要使用混入来模拟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.
}
}Stack Overflow用户
发布于 2017-01-11 09:50:18
在大多数代码片段主机站点上，您可以将任何类型的CSS代码“转换”/“编译”成普通的CSS(3)。我总是使用Codepen，然后使用CSS to SCSS converter。在你的情况下，我只会把它分成几个部分。(在Codepen上，您必须单击小⚙按钮并设置您的CSS Preprocessor)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41587378
复制相关文章
相似问题
腾讯云开发者
