ARWHD

One of the amazing things about Sass is that you can apply math to your stylesheets. Today I was working on a project with pixel based values and I wanted to use some math.

I wanted the padding of an element to be half of whatever I set my font-size to. Here’s a good example:

$s: 17px !default; // That's what my project dictated it.

.warning {
  font-size: $s;
  padding: $s/2;
}

But wait, when we divide our $s variable in half we get a float and not a whole number (8.5px). Can’t really tell how browsers respond to parts of a pixel so we’d really really want a whole number here. Now Sass makes that easy, it has three functions built in ceil(), floor() and round() that will come in really handy. floor() will round our number down to the previous whole number and ceil() will round it up to the next whole number. If we used round() it would round the nearest whole number.

$s: 17px !default; // That's what my project dictated it.
$t: floor($s / 2);
.warning {
  font-size: $s;
  padding: $t;
}

The other number function I’ve found comes in handy is percentage(). Let’s look at a grid example:

@for $i from 1 through 12 {
  .col-#{$i}-12 {
    width: percentage($i/12);
  }
}

This @for directive neatly divides the columns for us so we don’t have to do a lot of math ourselves each time we need a column.