(click anywhere to close)

[SASS] Operators

category: Website | course: SASS | difficulty:

Now that we know how to save values and declarations, wouldn’t it be nice if we could make those values dynamic? For example, instead of setting something to a fixed number, we could let SASS calculate the number (based on other variables) when it compiles.

To do so, we can use the standard math operators: +, -, *, /, %

We can use numerical variables, as well as regular numbers, to perform those mathematical operations.  What’s also important to notice, is that SASS can convert between several different units. If you use a number without unit, it will automatically take on the value of the other units. If you multiply the value by percentages, it will turn into a percentage.

Additionally, we can concatenate strings with the plus symbol, and add colours together. Adding colours goes piecewise; it adds the Red, Green, and Blue channel separately.

h2 {
	font-size:$font-size-h1 / 1.618px;
	color: #FFAA22 + #0055DD; //#FFFFFF

#main {
	width: 800px / 1200px * 100%; //66.667%

#sidebar {
	width: 400px / 1200px * 100%; //33.333%


Besides the default multiline CSS comments (created with /* */), SASS also supports single line comments. These are created with the standard double slash, //, and are removed from the file when compiled.

/* I AM 

// I'm a single line comment

Shorthand Properties

Within CSS, some shorthand properties exist that already use the slash. When SASS encounters two fixed values with a slash between them (and no space), it will assume you want to use the shorthand property and doesn’t apply division. In all other cases, such as with variables, SASS performs division.

So, if you want to divide fixed values, leave spaces around the slash. But, if you want to use the shorthand property with variables, use the interpolation syntax.

font-size: 12px/18px; //Interpreted by regular CSS as 12px font size, 18px line height
font-size: 12px / 18px; //Calculated by SASS
font-size: $some-var/$another-var; //Calculated by SASS
font-size: #{$some-var}/#{$another-var}; //Shorthand again


Lastly, you can force SASS to perform division, and to group numbers together, by placing parentheses around it. Additionally, this can be used to make sure a negation operator is associated with the corresponding number.

font-size: 20px - (5px + 5px); //10px
font-size: 20px (-5px) + 5px; //Error
font-size: 20px - 5px + 5px; //20px
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk