The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How Do I Stop SCSS (SASS) from Evaluating a Calculation?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #39041

    Being able to calculate in SCSS is a fantastic thing! Except when it’s not. Following line of code:

    font: 1.5em/55px arial;

    Because the 55px changes with the padding of other elements, I wanted to create a global variable and replace it:

    font: 1.5em/$barheight arial;

    SCSS takes that to be an evaluation, and tries to calculate some number. Given the fact that they are two different units, it errors out when it compiles. Not happy.


    I don’t know if this will help or not, but I know when doing some math in SCSS/SASS, you need to have a space between some operators.

    Try this?:

    font: 1.5em / $barheight arial;

    No dice.


    I just realized after playing in codepen, your original code isn’t actually doing division. If you try and do:

    font: (1.5em/55px) Arial;

    You’ll end up getting the same error. I’ve thrown together a quick codepen showing you a tiny function that can convert px to em for you.



    Right, the original code is not MEANT to do division. The syntax for that is:

    font: font-size/line-height fontname;

    My original question asks how do I STOP SCSS from evaluating a mathematical formula and turning it into a calculation, which it is not. I’m basically asking if there is a way to escape characters in SCSS?

    And I added on to your codepen to show you what I mean, and why it doesn’t work.


    Damn, my apologies man. I’ve rarely used the font tag (which I’ve been meaning to learn) so thanks for explaining that to me, haha. I was able to do a few searches and find out what you wanted. I think this should hopefully solve your problem:

    font: 1.5em/#{$barheight} arial;

    From what I understand, the #{variable} syntax tells it to just output the variable without actually doing calculations on it.


    Interpolation! That’s right! Yeah, that works. Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.