16.9    Operators

As briefly mentioned in the previous section, you can also use the calculation operators +, -, *, /, and % (modulo) with Sass. It can be quite useful to have the values calculated during the design and layout. Here’s an example that demonstrates a few ways you can use operators in Sass. I used this example in the context of media queries and adjusted a few properties with simple calculations.

SCSS File

CSS File

...
$article-width: 80%;
$font-increase: 0.125em;
$base-size: 1;
...
.my-article {
  font-family: $font;
font-size: $base-size * 1em;
padding: $base-size * 1em;
  background-color: lightgray;
  margin: 1em;
  @include breakpoint($mq-mobile) {
font-size: $base-size +
  $font-increase;

.my-article {
  font-family: "Franklin Gothic",
  "Arial Narrow", Arial, sans-serif;
  font-size: 1em;
  padding: 1em;
  background-color: lightgray;
  margin: 1em;
}

@media screen and (min-width: 30em) {
  .my-article {
  font-size: 1.125em;
  width: 80%;
  }
}

  width: $article-width;
  }
  @include breakpoint($mq-desktop) {
font-size: $base-size +
  ($font-increase * 2);
width: $article-width / 2;
  }
}

@media screen and (min-width: 60em) {
  .my-article {
  font-size: 1.25em;
  width: 40%;
  }
}

SCSS file: /examples/chapter016/16_9/style/style.scss

CSS file: /examples/chapter016/16_9/style/style.css

Table 16.11     The SCSS File and the CSS File after the Preprocessor Run

These examples don’t really need much more description. The usual rules such as “multiplication and division before addition and subtraction” apply here as well. You may be a bit surprised by the notation $base-size * 1em because it only calculates 1 × 1. This is necessary here because the $base-size variable has no unit, and this way we set the unit em. This wasn’t necessary for $base-size + $font-increase because $font-increase was assigned the unit em.