Sass add, subtract, multiply, and divide values

Use math in sass stylesheets. Input with a file named style.css.

.selector {
$width: 200;
$padding: 10;
 
padding: #{$padding}px;
right: -#{$width}px;
width: #{$width - (2 * $padding)}px;
}

Use the sass command to watch for file changes in style.scss and compile into style.css.

$ sass --sourcemap="none" --style "expanded" --watch "style.scss:style.css"
.selector {
padding: 10px;
right: -200px;
width: 180px;
}
View this page on GitHub.
Posted .

Comments

Leave a Reply