Learn

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:

If the value, or any part of it, is stored in a variable or returned by a function.
If the value is surrounded by parentheses, unless those parentheses are outside a list and the value is inside.
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

Instructions

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

Or sign up using:

Already have an account?