How do I stop Sass adding spaces before units of measurement?

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

John Flatness · Accepted Answer · 2012-06-05T01:51:52.723

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).

Aha, you found the issue I just put in the update. Multiplying by 1em is a nice trick :) — andrewdotnich, Jun 05 '12 at 01:45
I like the multiplying by 1em too. It feels mathematically correct. — Mentakatz, Jan 15 '14 at 17:20

score 31 · Answer 2 · answered Aug 13 '13 at 23:01

31

You can remove the space with a +

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

Will output.

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

answered Aug 13 '13 at 23:01

Nick Long

319
3
3

2

Yep this is the correct way – Jimmy Kane Sep 11 '14 at 15:36
I agree, you can do the interpolation way via #{$variable}em , but interpolation is not as simplified as this method is, which is what you are really looking for. – Lux.Capacitor Feb 03 '15 at 01:14
1

This should be the accepted answer! – wdetac Aug 04 '16 at 09:46
Why does this work? – xrisk Jun 02 '20 at 00:00

score 6 · Answer 3 · answered Jan 26 '13 at 18:46

6

You need to use string interpolation like so: #{$variable}em

Here is the reference: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

answered Jan 26 '13 at 18:46

Rob LaFeve

69
1
2

score 2 · Answer 4 · answered Jun 05 '12 at 01:36

2

Put the em into the variable, so $h1_size: 24em;

answered Jun 05 '12 at 01:36

Tom Pietrosanti

4,184
2
24
29

How do I stop Sass adding spaces before units of measurement?

4 Answers4