微客导航 » 文章资讯 » sass for循环

sass for循环

2024-04-14 21:13:03 501

示例

该@for指令允许您循环一些代码进行一定数量的迭代，并具有两种形式：

@for<var>from<start>through<end>{}

@for<var>from<start>to<end>{}

两种形式的区别是通过和到;的通过关键字将包括<end>在环路中，其中，以不会;使用直通等效于使用>=或使用<=其他语言，例如C++，JavaScript或PHP。

笔记

双方<start>并<end>必须是整数或函数返回整数。

当<start>大于时<end>，计数器将递减而不是递增。

SCSS示例

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

//CSS输出
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }