Sass递归混合

Question

我想知道，如果允许在sass中写一个这样的递归mixin，那么这个例子：

.size($val) when ($val < 200 ) {
    width: $val;
    height: $val;
   .size($val + 50px);
}

我尝试这样的事情，但我没有任何输出

@mixin test($val) {
  width: $val;
  height: $val;
  @for $i from 1 through 5 {
    @include test($val);
  }
}
.block {
  @include test(5);
}

Answer 1

在sass中，您可以创建递归函数，但您的示例是错误的。

查看代码，我发现你处于无限循环中，因为 @for 迭代器中没有使用 $ var 变量。你只能无限地从1到5迭代。

此处的递归方法与其他语言相同，您必须使用该参数再次调用该函数，并且当此变量与0相同时（例如），返回一个值...使用其值到函数的最后一次调用来设置新值......再次是第一步。

以下是Sass递归函数的示例：

• https://gist.github.com/paramburu/9613303
• http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#section-3

希望它有所帮助。

问候。

Answer 2

与你的LESS示例不同，你的Sass mixin没有办法摆脱循环。

@mixin test($val) {
  width: $val;
  height: $val;
  @if $val > 0 {
    @include test($val - 1);
  }
}