Skip to content

PostCSS plugin that enables for-loop syntax in your CSS, *with* variables

License

Notifications You must be signed in to change notification settings

xori/postcss-for

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS (fork of) For Plugin

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

Install

npm install -g postcss-for-var

Usage

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

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

$from: 1;
$to: 3;
@for @i from $from to $to {
    .b-@i { width: calc(@i / $to * 100%); }
}

the above solution assumes you're using postcss-simple-vars and postcss-calc

.b-1 {
    width: 33.33333%
}
.b-2 {
    width: 66.66667%
}
.b-3 {
    width: 100%
}

This plugin must be set after postcss-nested and postcss-simple-vars but before postcss-calc.

By keyword is available:

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

See PostCSS docs for examples for your environment.

About

PostCSS plugin that enables for-loop syntax in your CSS, *with* variables

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%