m

Sass & Compass For Designers

i

Chapter 8 Programmatic Logic with Sass

In this chapter of 'Sass and Compass for Designers' you will learn how to tackle and tame perhaps the most intimidating features of Sass - logic, loops and math.

These powerful features will be demystified in detail so you can put them to use in your next Sass and Compass project.

You can perform math in Sass:

.addition {
  width: 20% + 80%;
}

Easily create alternate themes

$color-theme: orange;
@if $color-theme == pink {
  $color-brand: pink;
}
@else if $color-theme == orange {
  $color-brand: #ff9900;
}

@for loops with (looks crazy but it will make sense, Scouts honor)

@for $i from 1 through 4 {
  .buy_#{$i} {
    background-image: image-url("svg/buy_#{$i}.svg");
    .no-svg & {
      background-image: image-url("buy/buy_#{$i}.png");
    }
  }
}

Sass's control directives are covered in depth and in layman's terms. If any of the above code samples look intimidating now don't worry. You can totally handle it.

Our journey together is nearly over. However, Chapter 9 concentrates on power user features of Sass and Compass and how to use them responsibly.

Errata

In Chapter 8 (Page 213 of the printed book), the following is written as a way to strip units from a value:
$variable-without-unit: ($variable-with-unit * 0 + 1);
With the following explanatory sentence: "The trick is to multiply the variable by 1 unit of the type of unit you would like the value to be." However, the example code should be:
$variable-without-unit: $variable-with-unit / ($variable-with-unit * 0 + 1);
And the text should be: "The trick is to first (the section in paranthesis) multiply the variable by a zero. This gives you a zero with the same unit as the original. Then we add 1 to give us a single value with the same unit as the variable. Now we can divide the original value by the 1 (remember both have the same unit) and this leaves only the result; crucially unitless!"