Beginning css preprocessors

Listing 3-60.  Setting Initial Classes and Variables

// Building custom grid system

$column-spacing:2%;

.col{

  float:left;

  margin-right:$column-spacing;

}

This code sets space between the two columns as 2% and defines a col class, which will be used in 

addition to the column-specific classes. Next, you will create column classes for a variable number of 

columns. The example supports a maximum of 12 columns, as shown in Listing 

3-61

.

Listing 3-61.  Calculating Various Column Classes

// Building custom grid system

$column-spacing:2%;

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

---

Chapter 3 

■

 advanCed SaSS

57

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

This code generates the output in percentages. You can initially assume that there is only one single 

column, which is equivalent to 12 cols. So when you want to calculate one single column (col-1), the 

calculation for this would be 

percentage(1/(total number of cols[12]/desired number of columns[1]) - column spacing;

You need to subtract the column spacing, as margin-right in specified in the .col class. In order to 

calculate the column width for various column configurations, you need to change the value of desired 

number of columns. The output of this code is shown in Listing 

3-62

.