如何在循环 LESS 时将数字转换为单词



我正在探索一种在循环 LESS 时将数字转换为单词的方法。

现在我有以下代码

.margin(@n, @i:1) when (@i <= @n) {
  .space-@{i} {
    margin: 0rem+ @i ;
  }
  .space-@{i}-top {
    margin-top: 0rem + @i ;
  }
  .space-@{i}-bottom {
    margin-top: 0rem + @i ;
  }
  .margin(@n, (@i+1));
}
.margin(2); 

它产生:

.space-1 {
  margin: 1rem;
}
.space-1-top {
  margin-top: 1rem;
}
.space-1-bottom {
  margin-top: 1rem;
}
.space-2 {
  margin: 2rem;
}
.space-2-top {
  margin-top: 2rem;
}
.space-2-bottom {
  margin-top: 2rem;
}

但是,我想实现类名space-one而不是space-1等等。

如何在 LESS 中使用数组?谢谢。

请参阅extract函数。

例如
@names:
    one,
    two,
    three,
    four,
    five;
.margin(3);
.margin(@i: 1) when (@i > 0) {
    .margin(@i - 1);
    @name: extract(@names, @i);
    .space-@{name} {
        margin: @i * 1rem;
    }
}

最新更新