Question

I’m attempting to follow this tutorial on responsive layout design, but using SASS/SCSS as my base specification language.

To that end, I have defined the following SCSS:

body {
  font: 100%/1.5;
}

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16)em;
  line-height:(28 / $h1_size)em;
  margin-top: (24 / $h1_size)em;
}

Unfortunately, the output from sass into CSS format looks like this:

h1 {
  font-size: 1.5 em;
  line-height: 1.167 em;
  margin-top: 1 em;
}

— with the unit separated from the value by a space. Chrome rejects these values as invalid, and only uses them if I manually go and remove the spaces myself.

Is there a way to fix this problem by tweaking my SCSS, or by passing an option to sass?

So far, I have tried:

• placing the unit inside the calculation:
  • (font-size: ($h1_size / 16em) ) => syntax error
  • (font-size: (($h1_size)em / 16) => font-size: 24 em/16; which is the same problem I’m trying to fix

Answer 1

You can push the em into the $h1_size definition, which will let you simply divide by 16 and have a result in ems.

If both sides of the division are in em, your result will be unitless. You can easily multiply by 1em to get your unit back, if needed.

h1 {
  $h1_size: 24em;
  font-size: ($h1_size / 16);
  line-height:(28em / $h1_size);
  margin-top: (24em / $h1_size * 1em);
}

Multiplying by 1em can also make something closer to your original example work. You can generally keep things unitless, then only multiply by 1em when you want the unit to appear. This avoids some of the pointless em proliferation in my first example:

h1 {
  $h1_size: 24;
  font-size: ($h1_size / 16 * 1em);
  line-height:(28 / $h1_size);
  margin-top: (24 / $h1_size * 1em);
}

Which way makes more sense mostly just depends on if your output will mostly be in one unit, or all sorts of different ones (including none).