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;
}