如何使用预处理器编写循环

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费赠送额度!

循环是那些您并非每天都需要的功能之一。 但是当您需要它时,预处理器可以执行此操作非常方便,因为原生 HTML 和 CSS 无法执行此操作。

Sass (SCSS)

for 循环

while 循环

each 循环

Less

for 循环

while 循环

(这就是上面的内容。when 子句可以被认为与 while 完全相同。)

each 循环

Stylus

for 循环

while 循环

Stylus 中只有 for 循环。

each 循环

for 循环实际上更像 each 循环,因此这里有一个更明显的 each 循环示例

Pug

for 循环

while 循环

each 循环

Haml

for 循环

while 循环

each 循环

Slim

for 循环

while 循环

each 循环