Sass in the Real World: book 1 of 4

Number Operations

SassScript supports the standard arithmetic operations on numbers (addition +, subtraction -, multiplication *, division /, and modulo %). Sass math functions preserve units during arithmetic operations.

SCSS

p {
  $width: 1000px;

  font: 10px/8px;             // Plain CSS, no division
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

CSS

p {
  font: 10px/8px;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}