Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

SCSS operators

SCSS operators

SCSS has a handful of standard math operators like +, -, *, /, and %.

In our example we're going to do some simple math to calculate widths for an aside & article.

You can use simple math to calculate widths for an aside & article. For example:
.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
The generated CSS will look like:
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

For more information on Sass, see the Sass/SCSS reference.