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

This project is a small library of Sass mixins, created by @LukyVj on his spare time.

You can find the header pattern generator on codepen

My colleagues from Algolia and my bros from bullgit for their feedback.

This page was made possible because of some awesome projects & scripts :

- Prism.js
- Searchbox
- codeFlask.js
- Sass.js
- holmes.js