Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.
CSS HTML JavaScript
Clone or download

README.md

Family.scss

npm version Bower version Build Status

Gitter

Version v1.0.8

Family.scss is a set of 26 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/

Installation

Regular

Alternative install

  • $ npm install family.scss
  • $ bower install family.scss
  • gem install family-rails (maintained by pzi)

Family.scss on npm

Usage

First of all, you need to import Family.scss into your project. If you're using eyeglass you can import it as such:

@import "family";

Otherwise import the Family.scss source file.

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;
}

Why only Sass ?

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

Changelogs

v1.0.8

  • Repository consistency | No changes on the lib.

v1.0.7

  • Repository consistency - No big changes on the lib.
  • The source family.scss file is now on source/src/_family.scss instead of source/src/family.scss

v1.0.6

  • each-after() mixin removed, re-opening #37

v1.0.5

  • first-child() mixin added.
  • last-child() mixin added.
  • each-after() mixin added, closing #37
  • Mention Holmes.js in the about modal.

v1.0.3

  • 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