postcss-family

1.0.1 • Public • Published

Postcss-Family

Build Status Coverage Status

PostCSS-Family is a partial port of Family.scss.

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

Usage

You can call the family command using the at rule @fam followed by the appropriate keyword and parameter (if applicable).

⚠️ requires a postcsss nesting plugin called after postcss-family

/* input.css */
ul li {
  background: red;
 
  @fam first(3) {
    background: blue;
  }
}
/* output.css */
ul li {
  background: red;
}
ul li:nth-child(-n + 3{
  background: blue;
}
 

PostCSS-Family Available keywords

Sequence Queries

  • first
  • last
  • after-first
  • from-end
  • between
  • even-between
  • odd-between
  • n-between
  • all-but
  • each
  • every
  • first-from-last
  • middle
  • all-but-first-last

Quantity Queries

  • first-of
  • last-of
  • at-least
  • at-most
  • in-between

No Parameter Queries

  • first-child
  • even
  • odd
  • all-but-first
  • all-but-last
  • first-last
  • unique
  • only

function documentation: family.scss This port is missing the child-index mixin.

Package Sidebar

Install

npm i postcss-family

Weekly Downloads

38

Version

1.0.1

License

MIT

Last publish

Collaborators

  • mpeutz