sass for循环转换为 less

问题描述

‘抄’组件库的代码时，可能会遇到需要将 sass 代码转换成 less 代码；sass 支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持，但是 less 可以使用函数递归的方式模拟 for 循环

解决方案

sass代码

$component-prefix: 'taroify-';
$hd:1;

@for $i from 1 through 24 {
  .#{$component-prefix}flex-item-#{$i} {
    flex: 0 0 $i * (100% / 24);
    max-width: $i * (100% / 24);
  }

  .#{$component-prefix}flex-item-offset-#{$i} {
    margin-left: $i * (100% / 24) * $hd;
  }
}

相对应的less代码：

@hd:1;
@component-prefix: .taroify-;

.flex(@n, @i: 1) when (@i =< @n) {
  @{component-prefix}flex-item-@{i} {
    flex: 0 0 @i * (100% / 24);
    max-width: @i * (100% / 24);
  }

  @{component-prefix}flex-item-offset-@{i} {
    margin-left: @i * (100% / 24) * @hd;
  }
  .flex(@n, (@i + 1));
}

.flex(24);