guwii
Menu
All Code Bytes

Code Bytes

Generate nth-child rules with a Sass for loop

Use a small SCSS loop for a deliberate sequence of styles, understand through versus to, and avoid generating unnecessary CSS.

By AlexPublished Updated

When each item needs a different value

A Sass loop is useful when the number of variations is known at build time. For example, six items might need increasing animation delays. The loop runs during compilation, not while a visitor scrolls the page.

SCSS example

@for $i from 1 through 6 {
  .steps > li:nth-child(#{$i}) {
    --step-delay: #{($i - 1) * 60ms};
  }
}

The first and last generated rules are:

.steps > li:nth-child(1) {
  --step-delay: 0ms;
}

.steps > li:nth-child(6) {
  --step-delay: 300ms;
}

Use var(--step-delay, 0ms) in an existing animation rule. Assigning the variable alone does not animate anything. Keep the animation optional under prefers-reduced-motion and keep the content visible without JavaScript.

How to use it well

Add the loop to the SCSS partial that owns the component, then compile through the project's normal Sass build. through 6 includes six; to 6 stops before it. Interpolation, #{$i}, inserts the loop value into the selector.

:nth-child() counts all element siblings, not only li elements. Use a predictable list structure or choose a selector that matches your markup. The seventh item gets the fallback value unless you generate a rule for it.

Avoid generating hundreds of nearly identical selectors to handle an unknown list length. For a repeating visual pattern, ordinary CSS such as :nth-child(3n) is often enough. If every item uses the same style, write one rule instead.

References: Sass @for and reduced-motion preference.

Original version30 June 2013

Kept here for reference and earlier links. The updated guide above is the recommended starting point; older code may depend on retired services or different software versions.

Looking to have an incrementing list or numbered :nth-child's in your CSS, but don't want to type it out manually?

Using a SCSS for loop will save you a huge amount of time, instead of manually typing out these kind of situations. Obviously, if you're using this too much there's possibly something to look at with your approach, but for things like :nth-child's where you may want each one to be different it's very good.

Use the following to create nth-child styles from 1 to 20.


@for $i from 1 through 20 {
  span:nth-child(#{$i}) {
    // your Styles here
  }
}

After compiling you get:


span:nth-child(1) {
  // Your Styles here
}

span:nth-child(2) {
  // Your Styles here
}

span:nth-child(3) {
  // Your Styles here
}

span:nth-child(4) {
  // Your Styles here
}

span:nth-child(5) {
  // Your Styles here
}

span:nth-child(6) {
  // Your Styles here
}

span:nth-child(7) {
  // Your Styles here
}

span:nth-child(8) {
  // Your Styles here
}

span:nth-child(9) {
  // Your Styles here
}

span:nth-child(10) {
  // Your Styles here
}

span:nth-child(11) {
  // Your Styles here
}

span:nth-child(12) {
  // Your Styles here
}

span:nth-child(13) {
  // Your Styles here
}

span:nth-child(14) {
  // Your Styles here
}

span:nth-child(15) {
  // Your Styles here
}

span:nth-child(16) {
  // Your Styles here
}

span:nth-child(17) {
  // Your Styles here
}

span:nth-child(18) {
  // Your Styles here
}

span:nth-child(19) {
  // Your Styles here
}

span:nth-child(20) {
  // Your Styles here
}

Keep exploring

A couple more useful notes.