Beginning css preprocessors

Listing 2-45.  Example of Using @if

$isVisible : true !default;

.container{

  @if $isVisible{

    display: block;

  }

  @else{

    display: none;

  }

}

In the previous code, $isVisible is evaluated inside .container and, depending on the result, a style is 

applied.

Listing 2-46.  Output of Listing 

2-45

.container {

  display: block;

}

@if can be combined with one or more @else if statements and one @else statement. Listing 

2-47

 

shows an example where the background color is applied in hex code based on the color specified in the text 

form.

Listing 2-47.  Combination of @if, @else if, and @else

$blockColor: green;

.container {

  @if $blockColor == red {

    background-color: #f00;

  } @else if $blockColor == green {

    background-color: #0f0;

  } @else if $blockColor == blue {

    background-color: #00f;

  } @else {

    background-color: #000;

  }

}

Listing 2-48.  Combination of @if, @else if, and @else

.container {

  background-color: #0f0;

}

---

Chapter 2 

■

 IntroduCtIon to SaSS

32

@for

The @for directive is used to output styles by means of looping. Using the @for loop, you can adjust styles 

based on the value of the counter. There are two variations of this:

•  Using through ($counter from through )

•  Using to ($counter from to )

When  is greater than , the counter will decrement. The main difference 

between through and to is that the former one includes the  while the latter one doesn’t. See 

Listings 

2-49

 through 

2-52

.

Listing 2-49.  Example of Using @for with through

@for $size from 1 through 3 {

  .header-#{$size} { font-size: 2em * $size; }

}

Listing 2-50.  Output of Listing 

2-49

.header-1 {

  font-size: 2em;

}

 

.header-2 {

  font-size: 4em;

}

 

.header-3 {

  font-size: 6em;

}

Listing 2-51.  Example of Using @for with to

@for $size from 1 to 3 {

  .header-#{$size} { font-size: 2em * $size; }

}

Listing 2-52.  Output of Listing 

2-51

.header-1 {

  font-size: 2em;

}

 

.header-2 {

  font-size: 4em;

}

---

Chapter 2 

■

 IntroduCtIon to SaSS

33

@each

The @each directive is another looping directive like @for, except that instead of using counters, you provide 

a list that determines which operation is performed.

Consider an example where you’re building styles for social icons, as shown in Listing 

2-53

. You loop 

an array that contains the names of the social icons and, using interpolation, you generate style classes with 

their names and background images.

Listing 2-53.  Example Demonstrating the @each Implementation

$socials: twitter linkedin pinterest;

@each $social in $socials {

  .#{$social} {

    background-image: url(/images/icons/#{$social}.png);

    width:16px;height:16px;

  }

}

Listing 2-54.  Output of Listing 

2-53

.twitter {

  background-image: url(/images/icons/twitter.png);

  width: 16px;

  height: 16px;

}

 

.linkedin {

  background-image: url(/images/icons/linkedin.png);

  width: 16px;

  height: 16px;

}

 

.pinterest {

  background-image: url(/images/icons/pinterest.png);

  width: 16px;

  height: 16px;

}

It is possible to have multiple variables and list them in @each, as shown in Listing 

2-55

. In this example, 

you are using two variables as one element in a loop. A pair of $notification and $color is treated as a 

single loop entity and it’s evaluated and the styles are generated accordingly.

Listing 2-55.  An Example Demonstrating an @each Implementation Using Multiple Lists

@each $notification, $color in (success, green),(warning, amber),(error,red) {

  .#{$notification}-icon {

    background-color: $color;

  }

}

---

Chapter 2 

■

 IntroduCtIon to SaSS

34

Listing 2-56.  Output of Listing 

2-55

.success-icon {

  background-color: green;

}

 

.warning-icon {

  background-color: amber;

}

 

.error-icon {

  background-color: red;

}

@while

The @while directive iterates until the condition given is not met and outputs the styles nested inside the 

body of the while loop. Listing 

2-57

 shows an example that builds the column layout for a responsive design. 

It’s building a four-column grid using a while loop.

Listing 2-57.  Example Demonstrating @while

$col: 4;

@while $col > 0 {

  .cols-#{$col} {

    width: 100% / $col;

  }

  $col: $col - 1;

}

Listing 2-58.  Output of Listing 

2-57

.cols-4 {

  width: 25%;

}

 

.cols-3 {

  width: 33.33333%;

}

 

.cols-2 {

  width: 50%;

}

 

.cols-1 {

  width: 100%;

}

Summary

This chapter introduced the fundamental components of Sass. In the next chapter, you will be diving in to 

advanced aspects of Sass, such as creating mixins and extending existing styles.

---

35