Beginning css preprocessors

Listing 3-62.  Output of Listing 

3-61

.col {

  float: left;

  margin-right: 2%;

}

 

.col-1 {

  width: 6.33333%;

}

 

.col-2 {

  width: 14.66667%;

}

 

.col-3 {

  width: 23%;

}

 

.col-4 {

  width: 31.33333%;

}

 

.col-5 {

  width: 39.66667%;

}

 

.col-6 {

  width: 48%;

}

 

.col-7 {

  width: 56.33333%;

}

 

.col-8 {

  width: 64.66667%;

}

 

---

Chapter 3 

■

 advanCed SaSS

58

.col-9 {

  width: 73%;

}

 

.col-10 {

  width: 81.33333%;

}

 

.col-11 {

  width: 89.66667%;

}

 

.col-12 {

  width: 100%;

}

Now for the final part of this example, you will add styles for the .row class, which will act like a 

container for all the columns. After adding the styles, the final code should look like Listing 

3-63

.

Listing 3-63.  Adding Styles for row

// Building custom grid system

$column-spacing:2%;

.row{

  margin-top:$column-spacing;

  &:after{

    clear:both;

  }

}

.col{

  float:left;

  margin-right:$column-spacing;

}

 

.col-1   { width:percentage(1 / 12) - $column-spacing; }

.col-2   { width:percentage(1 / 6) - $column-spacing; }

.col-3   { width:percentage(1 / 4) - $column-spacing; }

.col-4   { width:percentage(1 / 3) - $column-spacing; }

.col-5   { width:percentage(1 / 2.4) - $column-spacing; }

.col-6   { width:percentage(1 / 2) - $column-spacing; }

.col-7   { width:percentage(1 / 1.714285714285714) - $column-spacing; }

.col-8   { width:percentage(1 / 1.5) - $column-spacing; }

.col-9   { width:percentage(1 / 1.333333333333333) - $column-spacing; }

.col-10  { width:percentage(1 / 1.2) - $column-spacing; }

.col-11  { width:percentage(1 / 1.090909090909091) - $column-spacing; }

.col-12  { width:percentage(1); }

The output of this code will look as shown in Listing 

3-64

.

---

Chapter 3 

■

 advanCed SaSS

59

Listing 3-64.  Output of Listing 

3-63

.row {

  margin-top: 2%;

}

 

.row:after {

  clear: both;

}

 

.col {

  float: left;

  margin-right: 2%;

}

 

.col-1 {

  width: 6.33333%;

}

 

.col-2 {

  width: 14.66667%;

}

 

.col-3 {

  width: 23%;

}

 

.col-4 {

  width: 31.33333%;

}

 

.col-5 {

  width: 39.66667%;

}

 

.col-6 {

  width: 48%;

}

 

.col-7 {

  width: 56.33333%;

}

 

.col-8 {

  width: 64.66667%;

}

 

.col-9 {

  width: 73%;

}

 

---

Chapter 3 

■

 advanCed SaSS

60

.col-10 {

  width: 81.33333%;

}

 

.col-11 {

  width: 89.66667%;

}

 

.col-12 {

  width: 100%;

}

Now you can use this generated grid system with the HTML markup by using its classes, as shown in 

Listing 

3-65

 and Figure 

3-2

.

Listing 3-65.  Using the Generated Responsive Grid in the HTML (Example)

 

     Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, 

there live the blind texts. Separated they live in Bookmarksgrove right at the coast of 

the Semantics, a large language ocean. A small river named Duden flows by their place 

and supplies it with the necessary regelialia.

 

 

    This is a sidebar area

 

 

Figure 3-2.  Output of Listing 

3-65

Summary

This chapter explained the advanced topics of Sass, such as including other Sass files using import and 

using directives, using @media, extending using @extend, using mixins, and some of the commonly used 

functions provided by Sass and defining a functions using @function.

In addition to these topics, you also learned how to build your own grid system.

In next chapter, you will look into another framework like Sass, which provides similar features and is 

equally well known.

---

61