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
In main.scss, compute the
.math selector’s font size to be a 1/2 of its height.
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.