Conditions

Sass supports conditions for setting up styles based on variables. These really come in handy when you are defining methods and mixins. The conditions in Sass support an if, else if and else syntax similar to other languages.

Example:

$environment: dev
$grid-color: #c0c0c0

div.grid
  @if $environment == dev
    border: 1px solid $grid-color
  @else if $environment == qa
    border: 1px solid lighten($grid-color, 25%)
  @else
    border: 0

Tip: Arc90 SASS Color Tool is handy for getting color based function definitions for SASS.

In the above example, the else isn’t really needed and is used just for illustration purposes.

Next: Loops