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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?