Skip to Content
Functions and Operations
Division Can Be Special

In CSS the / character can be used as a separator. In Sass, the character is also used in division.

Here are the specific instances / counts as division:

  1. If the value, or any part of it, is stored in a variable or returned by a function.
  2. If the value is surrounded by parentheses, unless those parentheses are outside a list and the value is inside.
  3. If the value is used as part of another arithmetic expression.

Here are a few examples:

width: $variable/6; //division line-height: (600px)/9; //division margin-left: 20-10 px/ 2; //division font-size: 10px/8px; //not division



In main.scss, compute the .math selector’s font size to be a 1/2 of its height.

font-size: $width/6/2;

Since the first / is preceded by a variable, the symbol is interpreted as a division sign. The second / is preceded by an operation so it is also interpreted as a division symbol.

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Folder Icon

Sign up to start coding

Already have an account?