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 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;
This post is available on GitHub.
Posted .


Leave a Reply