Mathematical operations,  interpolations and for loops

With Sass, you can perform all kinds of mathematical operations. You can modify colors by adding or subtracting from them with the standard arithmetic operators.

If we have the color from the previous article:

$normalColor: #f5f5f5;

We can modify it as we please before using it:

p {
  color: $normalColor - #033;
}

The resulting CSS will contain the following hex color value:

color: #f5c2c2;

We are not limited to subtracting a hexadecimal color value, we can subtract/add rgb value no matter if we are performing the operation on another rgb value or on a hex value.

p {
  color: $normalColor - rgb(50,40,30);
}

The above snippet will result in the following CSS code:

#headline p {
  color: #c3cdd7;
}

Assume that we have the following markup:

<div id="boxes">
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
</div>

We add some basic styles to these individual boxes:

#boxes > div {
  background-color:  crimson;
  width: 120px;
  height: 120px;
  float: left;
  margin: 5px;
  text-align: center;
}

Now assume that we had many more boxes and we wanted to loop over each and gradually increase their font-size. In pure CSS this is not possible and you would have to do everything manually. However, this can be done with Sass:

@for $i from 1 through 3 {
  #boxes > div:nth-of-type(#{$i}) {
    font-size: 16px * $i;
    line-height: 100px;
  }
}

You are probably familiar with the for loop from JavaScript/PHP but the syntax is different in Sass. You type @for and then provide a variable name (where the current iteration number will be stored) and then choose from what number to what number you want it to loop – in our case from 1 through 3.

If you want to add a variable to a place other than a property’s value – such as the property name or the selector itself you would have to interpolate your string. This is done with the following syntax: #{$someVariable}. You can see in our case that we have interpolated the $i variable to the nth-of-type pseudo-selector so that we can provide a different value for each div.

On the next line, you can see that we have multiplied the pixel value by the iteration counter. You can add/subtract/multiply/divide pixel values and other units with an arbitrary number.

Now, as we add new boxes their font-size will automatically increase as you can see from the picture below… and it will probably become huge too fast.

Randomness and concatenation

If you want the font-size to be in the hands of God (more likely in the machine) Sass allows you to generate random numbers.

@for $i from 1 through 3 {
  #boxes > div:nth-of-type(#{$i}) {
    font-size: random(60) + 5 + px;
    line-height: 100px;
  }
}

We change our font-size property to hold a random number between 1 and a maximum (top) value you provide, in our case we provide a top value of 60 and add 5 to it so the font would not be as small as 1px. Sass also allows string concatenations (with or without quotes) so in the end we just add px in order to have a valid value for the font-size property.

Now, each time we recompile our Sass code the boxes will have a different font-size. Here is a sample result (CSS):

#boxes > div:nth-of-type(1) {
  font-size: 54px;
  line-height: 100px;
}

#boxes > div:nth-of-type(2) {
  font-size: 29px;
  line-height: 100px;
}

#boxes > div:nth-of-type(3) {
  font-size: 23px;
  line-height: 100px;
}

Conclusion

Be sure to go again in http://sassmeister.com/ and play around with what you have learned so far. Undoubtedly, there are much better uses to what we have been showing that you can explore.