Grow your CSS skills. Land your dream job.

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

  • # July 24, 2012 at 1:48 pm

    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.

    # July 24, 2012 at 2:02 pm

    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;
    # July 24, 2012 at 2:20 pm

    No dice.

    # July 24, 2012 at 2:37 pm

    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.

    link: http://codepen.io/chrisxclash/pen/yhAwe

    # July 24, 2012 at 3:13 pm

    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.

    # July 24, 2012 at 4:08 pm

    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.

    # July 24, 2012 at 5:19 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".