SASS doesn't work with "rem" - produces errors when adding two "rem" values

Question

EDIT: The first addressed thread has the answer to my problem! I'm returning a String instead a Numberfrom a mixin and so Sass can't handle the value!

I'm using Sass 3.2.12 (Media Mark) for my project (I'm running Intellij IDEA 12.1 on a Windows 7 Professional machine) and I've got some troubles working with rem units...

If I want to do something like this:

$my-font-size: 2.1875rem;

a {
  font-size: $my-font-size * 1.2;
}

I get the following error:

error design/main.scss (Line 81 of design/_components.scss: Undefined operation: "1.2 times 2.1875rem".)

Also, if I try to add two rem units, like this:

$common-margin: 1.234rem;
.another-class {
  position: absolute;
  top: $common-margin + 0.3rem;
}

the preprocesser doesn't give me an error, but the produced output reads as follows:

.another-class {
  position: absolute;
  top: 1234rem0.3rem; //<-- what's this!?
}

Am I missing something here?

Consider using Stylus (https://github.com/learnboost/stylus) or AbsurdJS (https://github.com/krasimir/absurd) — Krasimir, Nov 18 '13 at 12:21
Also: http://stackoverflow.com/questions/17197353/adding-two-values-in-sass-function-creates-double-instance-of-px — cimmanon, Nov 18 '13 at 16:54
@cimmanon thanks a lot - the second thread you posted is the answer to my problem! I, too, returned a `String` from my `@function`s so that Sass just concatenated them instead of adding the values... WHOEVER has the power to change the **this question may already...**, would you mind to reference the second link @cimmanon posted? — herom, Nov 19 '13 at 07:31

SW4 · Answer 1 · 2013-11-18T12:21:15.993

1

You need to define and use a mixin, e.g. per this article (another good one, oh, and one more)

  @mixin x-rem ($property, $value) {
      #{$property}: $value * $main-font-size;
      #{$property}: #{$value}rem;
  }

Can be called, e.g:

@include x-rem(font-size, 1.4);
@include x-rem(padding-left, 2);

By creating mixins as appropriate to your site you can get the responsiveness required out of using rem, by having whatever your base measure is (as in the above $main-font-size) feature in the mixin directly. Dont forget- a rem unit is a relative unit, so you cannot simply specify it directly (as you have with $my-font-size: 2.1875rem;).

edited Nov 18 '13 at 12:21

answered Nov 18 '13 at 12:16

SW4

69,876
20
132
137

actually I'm using a mixin to generate my **rem** units, which is `@function convertPxToRem($px) {@return #{($px/16) + "rem"};};` so that I'm able to write something like this `font-size: convertPxToRem(22);` and so on as this seems to me like it's more readable than several includes where the CSS property is given as a param...? – herom Nov 18 '13 at 12:56

SASS doesn't work with "rem" - produces errors when adding two "rem" values

1 Answers1