1. postcss-for
PostCSS plugin that enables SASS-like for loop syntax in your CSS
postcss-for
Package: postcss-for
Created by: antyakushev
Last modified: Fri, 24 Jun 2022 10:01:23 GMT
Version: 2.1.1
License: MIT
Downloads: 409,785
Repository: https://github.com/antyakushev/postcss-for

Install

npm install postcss-for
yarn add postcss-for

PostCSS For Plugin

Build Status
NPM version
Dependency Status
NPM Downloads


PostCSS plugin that enables @for loop syntax in your CSS.

Try it out!

You can try postcss-for directly from codepen.
Just choose PostCSS as a preprocessor and pick desired plugin from the list.


lalala

Usage

 postcss([ require('postcss-for') ])

Note, that unlike the Sass @for, postcss-for in the example below iterates from 1 to 3 inclusively.

 @for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}
 .b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}

This plugin must be set before postcss-nested and postcss-simple-vars.
Therefore dollar variable cannot be used as a loop range parameter.
If you do want to use predefined range parameters though, consider using postcss-custom-properties with postcss-at-rules-variables, or look into this postcss-for fork.

More features

By keyword is available:

 @for $i from 1 to 5 by 2 {
    .b-$i { width: $(i)px; }
}
 .b-1 {
    width: 1px
}
.b-3 {
    width: 3px
}
.b-5 {
    width: 5px
}

Locality of variables in nested loops is supported:

 @for $x from 1 to 2 { 
    @for $y from 1 to $x { 
        @for $z from $y to $x { 
            .c-$(x)-$(z)-$(y) { padding: $(x)em $(z)em $(y)em; } 
        }
    }
}
 .c-1-1-1 {
    padding: 1em 1em 1em
}
.c-2-1-1 {
    padding: 2em 1em 1em
}
.c-2-2-1 {
    padding: 2em 2em 1em
}
.c-2-2-2 {
    padding: 2em 2em 2em
}

See PostCSS docs for examples for your environment.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code