Sass 101 - A newb's guide: Operations w/directive

operation_w_directive.md

All types support equality operations (== and !=). In addition, each type has its own operations that it has special support for.

SassScript supports the standard arithmetic operations on numbers (+, -, *, /, %), and will automatically convert between units if it can.

Relational operators (<, >, <=, >=) are also supported for numbers, and equality operators (==, !=) are supported for all types.

In the following example you will see that operators are very handy with comparing values for control directives. SassScript supports basic control directives for including styles only under some conditions or including the same style several times with variations.

operation_w_directive.scss

SassMeister Gist

operation_w_directive.scss

$width: 800px;
$padding: 20px;
$border-width: 1px;

.box {
  box-sizing: border-box;
  width: $width;
  @if $padding > 0 {
    padding: $padding;
  }
  @if $border-width != 0 {
    border: $border-width solid black;
  }
  $no-box-width: $width - ($padding * 2 + $border-width * 2);
  @if $no-box-width < $width {
    .no-boxsizing & {
      width: $no-box-width;
    }
  }
}