0

I'm dynamically assigning a value to a $baseline variable using SASS functions.

I have a px to REM converter

$old-ie: true;
$font-base: 16px;

@function rem($size) {

  @if ($old-ie) {
    @return #{$size}px;
  }

  @else {
    $remSize: $size / $font-base;
    @return #{$remSize}rem;
  }

}

$baseline = rem(10);

h1 {
  margin-bottom: $baseline*2;
  // This shows as margin-bottom: rem(10)*2; in the stylesheet if $old-ie is set to true.
}

Could be related to interpolation but the * 1px hack doesn't seem to solve it. Any suggestions / alternatives or workarounds?

Craig
  • 972
  • 3
  • 13
  • 38
  • There needs to be enough code here to compile as is (undefined variables, etc.) *and* reproduce the problem. – cimmanon Sep 08 '14 at 21:40
  • Shouldn't it be `rem(10*2)`? – RaphaelDDL Sep 08 '14 at 21:46
  • @RaphaelDDL The multiplication happens to the variable, not the original function call. Updated the code. – Craig Sep 09 '14 at 01:14
  • @cimmanon This is not a duplicate, updated the code to better explain – Craig Sep 09 '14 at 01:22
  • You need to reread the other question then. You're both trying to perform arithmetic operations on strings. Funny how not performing arithmetic on strings makes it work, isn't it? http://sassmeister.com/gist/7237a4f53d00ba30b785 – cimmanon Sep 09 '14 at 01:39
  • Huh, I literally just tried that and it didn't work. – Craig Sep 09 '14 at 02:28
  • Hmm... I tried that and it didn't solve the issue; it obviously works though so something else must be going on as well. Thanks for the help. – Craig Sep 09 '14 at 02:31
  • Better duplicate question: http://stackoverflow.com/questions/8254941/math-with-interpolated-variables – cimmanon Sep 09 '14 at 02:38

0 Answers0