Stylus for-in loop tutorials with examples in mixins and functions

Like Sass language, It provides the following features in Stylus.

This tutorial covers an example of how to iterate expressions or a list of values and generate CSS code using a for-in loop.

for Loop iteration

For loop used to iterate the loop of values and generate dynamic CSS code.

It provides a for-in loop for iteration expressions.

Syntax

  for value [, key] in expression

size-1 = 30px
size-2 = 24px
size-3 = 20px
size-4 = 18px
size-5 = 14px
for i in 1..5
  h{i}
    font-size: lookup('size-' + i)

Generated CSS

h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 14px;
}

a for-in loop can be used in mixins and functions

Here is an example for-in loop used in functions

add(numbers)
    result = 0
    for i in numbers
      result += i
div{
  font-size:add(11 12 13)
}

Compiled to css

div {
  font-size: 36;
}