The Sass arithmetic operations are:
Note: Modulo, or
%, is the remainder in a given division, so “9%2” would be “1”.
SCSS arithmetic requires that the units are compatible; for example, you can’t multiply pixels by ems.
Also, just like in regular math, multiplying two units together results in squared units:
10px * 10px = 100px * px.
Since there is no such thing as squared units in CSS, the above would throw an error. You would need to multiply
10px * 10 in order to obtain
In main.scss inside of
.math, include the following computations:
height: $width/6; line-height: $width/6;
Click “Run” to see your changes in the browser and inspect them in the output of main.css.
In main.scss compute the
border-radius property of the
.math class to be a 1/30th of its width.