This is a postcss port of the awesome Family.scss plugin
Family is a set of 26 smart Postcss functions which will help you to manage the style of
:nth-child‘ified elements, in an easy and classy way. - Family.scss
Why
When I was using sass to build my css I fell in love with the Family.scss plugin. It made complex nth-child selector a breeze to write. So when I moved to postcss I looked for a port of it. To my dismay there was none, there were a few attempts but no usable version. That is when I decided that if I wanted it I would have to build it and postcss-family was born.
Usage
You can call the family command using the at rule @fam followed by the appropriate keyword and parameter (if applicable).
This plugin requires postcss nesting called after postcss-family
1
2
3
4
5
6
7
8
/* input.css */
ul li {
background: red;
@fam first(3) {
background: blue;
}
}
1
2
3
4
5
6
7
/* output.css */
ul li {
background: red;
}
ul li:nth-child(-n + 3) {
background: blue;
}
PostCSS-Family Available keywords
Sequence Queries
First
1
@fam first(3);
Add or Remove items:
Last
1
@fam last(3);
Add or Remove items:
After-First
1
@fam after-first(5);
Add or Remove items:
From-end
1
@fam from-end(3);
Add or Remove items:
Between
1
@fam between(3, 6);
Add or Remove items:
Even-Between
1
@fam even-between(3, 12);
Add or Remove items:
Odd-Between
1
@fam odd-between(3, 13);
Add or Remove items:
N-between
1
@fam n-between(3, 3, 13);
Add or Remove items:
All-but
1
@fam all-but(3);
Add or Remove items:
each
1
@fam each(3);
Add or Remove items:
every
1
@fam every(3);
Add or Remove items:
middle
1
@fam middle(11);
Add or Remove items:
All-but-first-last
1
@fam all-but-first-last(2);
Add or Remove items:
From-first-last
1
@fam from-first-last(2);
Add or Remove items:
Quantity Queries
first-of
1
@fam first-of(10);
Add or Remove items:
last-of
1
@fam last-of(10);
Add or Remove items:
at-least
1
@fam at-least(10);
Add or Remove items:
at-most
1
@fam at-most(5);
Add or Remove items:
in-between
1
@fam in-between(5, 10);
Add or Remove items:
No Parameter Queries
first-child
1
@fam first-child;
Add or Remove items:
even
1
@fam even;
Add or Remove items:
odd
1
@fam odd;
Add or Remove items:
all-but-first
1
@fam all-but-first;
Add or Remove items:
all-but-last
1
@fam all-but-last;
Add or Remove items:
first-last
1
@fam first-last;
Add or Remove items:
unique
1
@fam unique;
Add or Remove items:
only
1
@fam only;
Add or Remove items:
not-unique
1
@fam not-unique;
Add or Remove items:
More function documentation: family.scss; This port is missing the child-index mixin.