Family.scss

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

Download ( 2kb ) Github

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

The better 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: blue;

  @include first(3) {
    background: red
  }
}

ul li {
  background: blue;
}

ul li:nth-child(-n + 3) {
  color: 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

pair-between

@include pair-between(3, 12)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

impair-between

@include impair-between(3, 13)

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

I/O Mixins

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

Without arguments

pair

 @include pair()

 // Alias of pair()
 @include even()

1
2
3
4
5
6
7
8
9
10

impair

 @include impair()

 // Alias of impair()
 @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; } } /*===================== pair-between(3, 12) =====================*/ ul li { @include pair-between(3, 12){ @include active; } } /*===================== impair-between(3, 13) =====================*/ ul li { @include impair-between(3, 13){ @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; } } /*===================== pair() =====================*/ ul li { @include pair(){ @include active; } } /*===================== even() =====================*/ ul li { @include even(){ @include active; } } /*===================== impair() =====================*/ ul li { @include impair(){ @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; } }