Family.scss

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.

The goal of this project is to unleash the power of the nth-child property, in an easy way.

The best way to understand each and every mixin, is to read it, literally.

For example: first(3) => first three

Each and every mixin is really easy to use, proceed like this:

ul li {
  background: red;

  @include first(3) {
    background: red
  }
}
ul li {
  background: red;
}

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

With Arguments

first

 @include first(3)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

last

 @include last(3)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

after-first

 @include after-first(5)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

from-end

 @include from-end(3)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

between

@include between(3, 6)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

even-between

@include even-between(3, 12)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

odd-between

@include odd-between(3, 13)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

n-between

@include n-between(3,3,13)
 // This mixin uses 3 arguments, the first one is equal to N item,
 // the second is the starting item and the thirs the end item.  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

all-but

 @include all-but(3)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

each

 @include each(3)

 // Alias of each()
 @include every(3)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

from-first-last

 @include from-first-last(2)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

middle

 @include middle(11)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

all-but-first-last

 @include all-but-first-last(2)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Quantity queries

first-of

 @include first-of(10)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

last-of

 @include last-of(10)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

at-least

 @include at-least(5)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

at-most

 @include at-most(5)
  • 1
  • 2
  • 3
  • 4
  • 5

in-between

 @include in-between(5, 10)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Without arguments

first-child

 @include first-child()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

last-child

 @include last-child()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

even

 @include even()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

odd

 @include odd()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

first-last

 @include first-last()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

unique

 @include unique()
  • 1

not-unique

 @include not-unique()
  • 1

Using functions

child-index()

Apply an ordered z-index over each child.

 // Basic usage
 @include child-index(10); // equivalent of @include child-index(10, forward, 0)

 // This mixin can take up to 3 arguments : 
 // $num : Number of child to index 
 // $direction : Direction of the indexing [ forward / backward ] 
 // $index : Base indexing number [1, 10, 20 => 1, 2, 3; 11, 12, 13; 21, 22, 23 ]
 @include child-index(5, backward, 10);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Playground

@mixin active { background: red; color: #fff; } /*===================== first(3) =====================*/ ul li { @include first(3){ @include active; } } /*===================== last(3) =====================*/ ul li { @include last(3){ @include active; } } /*===================== after-first(5) =====================*/ ul li { @include after-first(5){ @include active; } } /*===================== from-end(3) =====================*/ ul li { @include from-end(3){ @include active; } } /*===================== between(3, 6) =====================*/ ul li { @include between(3, 6){ @include active; } } /*===================== even-between(3, 12) =====================*/ ul li { @include even-between(3, 12){ @include active; } } /*===================== odd-between(3, 13) =====================*/ ul li { @include odd-between(3, 13){ @include active; } } /*===================== n-between(3, 10, 20) =====================*/ ul li { @include n-between(3, 10, 20){ @include active; } } /*===================== all-but(3) =====================*/ ul li { @include all-but(3){ @include active; } } /*===================== each(3) =====================*/ ul li { @include each(3){ @include active; } } /*===================== every(3) =====================*/ ul li { @include every(3){ @include active; } } /*===================== from-first-last(2) =====================*/ ul li { @include from-first-last(2){ @include active; } } /*===================== middle(11) =====================*/ ul li { @include middle(11){ @include active; } } /*===================== all-but-first-last(2) =====================*/ ul li { @include all-but-first-last(2){ @include active; } } /*===================== first-of(10) =====================*/ ul li { @include first-of(10){ @include active; } } /*===================== last-of(10) =====================*/ ul li { @include last-of(10){ @include active; } } /*===================== at-least(10) =====================*/ ul li { @include at-least(10){ @include active; } } /*===================== at-most(10) =====================*/ ul li { @include at-most(10){ @include active; } } /*===================== in-between(5, 10) =====================*/ ul li { @include in-between(5, 10){ @include active; } } /*===================== even() =====================*/ ul li { @include even(){ @include active; } } /*===================== odd() =====================*/ ul li { @include odd(){ @include active; } } /*===================== first-last() =====================*/ ul li { @include first-last(){ @include active; } } /*===================== unique() =====================*/ ul li { @include unique(){ @include active; } } /*===================== not-unique() =====================*/ ul li { @include not-unique(){ @include active; } } /*===================== child-index(10) =====================*/ ul li { @include child-index(10){ @include active; } } /*===================== child-index(5, backward, 10) =====================*/ ul li { @include child-index(5, backward, 10){ @include active; } }