UX Design and Development course

Operations

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.

block {
  font-size: 12 / 16 * 1em;
  width: 500 / 16 * 1em;
  padding: 20 / 16 * 1em;
  margin: 25 * 1%;
}

Operation inside a function

It is possible to define your own functions in sass and use them in any value or script context.

Functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within it, and you must call @return to set the return value of the function.

As you will see in the following example, creating a function that allows for custom arguments based on global values and uses Sass operations can be a powerful tool.

@function em($target, $context: $default-font-size) {
  @return $target / $context * 1em;
}

@function percent($target) {
  @return $target * 1%;
}

$base-font-size: 16;
$default-font-size: 12;

html {
  font-size: em($default-font-size, $base-font-size);
}

.class {
  font-size: em(12);
  width: em(500);
  padding: em(20);
  margin: percent(25);
}

SassMeister Gist

Color operations

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn.

In the following example, ff + 26, 00 + 93, and aa + ff will create the final color of ff93ff

$background-color: #ff00aa;
$text-color: #2693ff;
$border-color: $background-color + $text-color;

.box {
  color: $text-color;
  background-color: $background-color;
  border: $border-color;
}

SassMeister Gist