Css Less to Sass：如何将Less-guard（default（））转换为Sass

我正在尝试将一些混音从less转换为sass。 我对这两种语言都不是很熟练，所以我根本不确定我是否做对了。 原始的Less混合：

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
 }


.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}

我确定了三个主要问题： 1） 如何翻译sass中的警卫？在一个mixin中收集具有相同数量参数的mixin并在其中写入条件块是否正确

2） （default（））是如何工作的？我一直试图在文档中找到一个很好的解释，但找不到任何解释

3） sass中是否有相当于较少提取的函数

---

多谢各位

首先，您给出的mixin是一个模拟

for

和

for each

循环的mixin，因为Less没有内置函数。与Less不同，Sass已经内置了用于执行循环的

@for

和

@each

指令，因此我建议您不要花费时间将这些较少的混音转换为Sass

下面是的

和每个

循环的

的Sass示例：

用于：

.column{
@对于从1到5的$i{/*执行循环5次*/
&-#{$i}{/*使用选择器插值创建.column-1到.column-5*/
宽度：20%；
左：（$i-1）/5*100%）；
}
}
}

对于每一个：

$国家代码列表：美国、印度、法国、新加坡；/*迭代列表*/
.国旗{
@$country code列表中的每个$country code{/*迭代列表中的每个值*/
&-#{$country code}{/*create.flag US、.flag IN etc使用选择器插值*/
背景图片：url(http://yoursite.com/#{$country code}.png）；
}
}
}

您可以尝试上面的示例@，并查看编译后的输出


现在来回答你们的问题

1） 如何翻译sass中的警卫？在一个mixin中收集具有相同数量参数的mixin并在其中写入条件块是否正确

在Sass中，更少的保护将转换为
@if
（条件语句）。以下是一个例子：

@mixin列表样式（$val）{
@if（$val==i）{列表样式类型：lower roman；}
@else if（$val==I）{列表样式类型：上罗马；}
@else{列表样式类型：decimal}；
}
#演示{@include列表样式（2）；}

你问题的第二部分可能是基于观点的，因为每个人都有自己的做事方式。我个人更喜欢将它们分组在一个mixin中并编写条件块


2） （default（））是如何工作的

Less中的
default（）
保护类似于典型的
else
或
default:
（在开关情况下）语句。只有当没有其他具有相同名称和相同数量参数的mixin匹配时，才会调用使用此作为保护的mixin

例如，看看下面的代码。这里，当作为参数传递给mixin的值不是
i
或
i
时，前两个mixin保护都不匹配，因此不会执行这些mixin。在这种情况下，将执行第三个（default（）

）并将列表样式类型设置为

decimal

.mixin列表样式（@val）当（@val=i）{list style type:lower-roman；}
.mixin列表样式（@val）当（@val=I）{列表样式类型：上罗马；}
.mixin列表样式（@val）when（default（））{列表样式类型：decimal；}
#演示{
.mixin列表样式（1）；/*这将导致列表样式类型：decimal*/
}

---

3） sass中是否有相当于较少提取的函数

是的，Sass中有一个

nth（）

函数，它相当于Less

extract（）

函数。以下是一个示例：

$国家代码列表：美国、印度、法国、新加坡；
.国旗{
$country code:nth（$country code list，3）；/*从国家代码列表中提取第三项*/
背景图片：url(http://yoursite.com/#{$country code}.png）；
}

注意：每个

@循环都不需要这个，因为Sass会自动提取项目并为每次迭代分配变量