sass for循环转换为 less

FE-阿阳

已于 2022-03-13 11:37:22 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

于 2022-03-12 21:40:08 首次发布

本文链接：https://blog.youkuaiyun.com/yang450712123/article/details/123450864

css 同时被 2 个专栏收录

39 篇文章

订阅专栏

less

3 篇文章

订阅专栏

本文介绍了如何在转换Sass代码为Less代码时处理条件语句和循环。Sass支持if-else和for循环，而Less不直接支持，但可以通过函数递归模拟for循环。文中给出了一个具体的例子，展示如何将Sass的@for循环转换为Less的递归函数，用于创建响应式的flex布局。转换后的Less代码利用了函数`.flex()`来达到相同的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

‘抄’组件库的代码时，可能会遇到需要将 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);