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
1.
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.