Question

我正在尝试将一些mixins从less转换为sass。我对这两种语言都不熟悉，所以如果我做得对，我根本不确定。原来的Less mixins：

.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）when（default（））如何工作？我一直试图在文档中找到一个很好的解释但却找不到。

3）sass中是否有一个函数，相当于较少的提取物？

非常感谢！

Answer 1

首先，您提供的mixin是created by seven-phases-max模仿for和for-each循环的混合因素，因为Less不具备内置的功能。与Less不同，Sass已经内置@for和@each指令来执行循环，因此我建议您不要花时间将这些Less mixins转换为Sass。

以下是for和for-each循环的Sass示例：

：用于：

.column { @for $i from 1 through 5 { /* execute the loop 5 times */ &-#{$i} { /* create .column-1 to .column-5 using selector interpolation */ width: 20%; left: (($i - 1) / 5 * 100%); } } }

每个人：

$country-code-list: US, IN, FR, SG; /* list for iteration */ .flag { @each $country-code in $country-code-list { /* iterate for each value in the list */ &-#{$country-code} { /* create .flag-US, .flag-IN etc using selector interpolation */ background-image: url(http://yoursite.com/#{$country-code}.png); } } }

您可以尝试以上样本@ SassMeister.com并查看已编译的输出。

现在回答你的问题，


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

较少的守卫会转换为Sass中的@if（条件陈述）。以下是一个例子：

@mixin list-style($val) { @if ($val == i) { list-style-type: lower-roman; } @else if ($val == I) { list-style-type: upper-roman; } @else { list-style-type: decimal }; } #demo { @include list-style(2); }

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


2）when（default（））如何工作？

Less中的default()保护就像典型的else或default:（在switch-case中）一样。只有在没有其他mixin具有相同名称和相同的no时才会调用mixin作为后卫。参数匹配。

例如，看看下面的代码。这里作为参数传递给mixin的值是i或I之外的任何一个，前两个mixin防护都不匹配，因此这些mixin不会被执行。在这种情况下，第三个（default()）将被执行并将列表样式类型设置为decimal。

.mixin-list-style(@val) when (@val = i) { list-style-type: lower-roman; } .mixin-list-style(@val) when (@val = I) { list-style-type: upper-roman; } .mixin-list-style(@val) when (default()) { list-style-type: decimal; } #demo { .mixin-list-style(1); /* this will result in list-style-type: decimal */ }


3）sass中是否有一个函数，相当于较少的提取物？

是的，Sass中有一个nth()函数，相当于Less extract()函数。以下是一个示例：

$country-code-list: US, IN, FR, SG; .flag-FR { $country-code: nth($country-code-list, 3); /* extract 3rd item from country-code-list */ background-image: url(http://yoursite.com/#{$country-code}.png); }

注意：您不需要使用@each循环，因为Sass会自动提取项目并为每次迭代分配变量。

减少Sass：如何在（默认（））sass时将较少的防守翻译

1 个答案: