Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Operations w/directive

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.


SassMeister Gist

$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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment