Family.scss


Family.scss is a set of 26smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way.
Download (4Kb)  Github  
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;  } }  




Made with <code>by@LukyVj - About

Version: 1.0.8  


About :

 
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
  

Thanks to :

 
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