Family.scss is a set of 24 smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way.

Website : http://lukyvj.github.io/family.scss/

• Clone the project
• $ middleman ( You don't use middleman ? Goto https://middlemanapp.com/ )

• $ npm install family.scss
• $ bower install family.scss

Family.scss on npm

First of all, import the Family.scss source file into your project.

Then you can use the mixins right away on your stylesheets.

Input :

ul li {
  background: blue;

  @include first(3) {
    background: blue;
  }
}

Output :

ul li {
  background: blue;
}
ul li:nth-child(-n + 3) {
  background: blue;
}

It's true, I did it for Sass, but some awesome contributors extended it to :

• Stylus

• first() mixin now uses :first-child if the given parameter is 1, closing #10
• n-between() mixin added, closing #35
• at-least(), at-most() and in-between() quantity queries mixins added, closing #24
• pair-between() is now even -between(), closing #34
• impair-between() is now odd-between(), closing #34
• Source code for the header pattern generator added in the about modal
• Version number added in the footer
• backdrop-filter removed from the about page