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

时间:2014-11-27 11:41:23

标签: 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中使用数组?谢谢。

1 个答案:

答案 0 :(得分:0)

请参阅extract功能。 E.g。

@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;
    }
}
相关问题