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

  • if-else conditional
  • loop iterations
  • is check

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.


  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
    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

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

Compiled to css

div {
  font-size: 36;