Family.scss

More Web Proxy on the site http://driver.im/

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