更少的SCSS MIXIN转换 [英] LESS SCSS MIXIN conversion

问题描述

正文类可能具有.m01，.m02，.m03，.m04，具体取决于页面部分的颜色中断. 我正在尝试将LESS转换为SCSS，但是在转换下面的混合时遇到问题.

Body classes may have .m01, .m02, .m03, .m04 depending on the colour break for the section of the pages. I am trying to convert LESS into SCSS, but I am having trouble converting the mixing below.

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

推荐答案

尽管RaisingAgent提供的答案是一种相当不错的方法，但它不会教您如何在Sass中进行操作或帮助您了解Sass的工作原理.这个答案将帮助您.

While the answer provided by RaisingAgent is a reasonably good approach, it wouldn't teach you how to do this thing in Sass or help you understand how Sass works. This answer will help you with that.

与Less不同，Sass不允许您访问通过插值动态创建其名称的变量(@col_lvl_01_multi变量).为此，您将不得不使用列表和nth函数.

Unlike Less, Sass does not allow you access a variable whose name is dynamically created through interpolation (the @col_lvl_01_multi variable). You will have to make use of lists and nth function for this.

Sass还具有一个内置的@for指令，可用于创建循环，因此无需使用mixin模仿for循环.因此，您的代码可以按如下所示转换为Sass:

Sass also has an in built @for directive which can be used to create loops and so there is no need to mimic the for loop using a mixin. So, your code can be converted to Sass as follows:

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

这篇关于更少的SCSS MIXIN转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！