Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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
You can’t perform that action at this time.