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

[paintba11er89]

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.

[ChrisxClash]

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;

[paintba11er89]

No dice.

[ChrisxClash]

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

[paintba11er89]

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.

[ChrisxClash]

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.

[paintba11er89]

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

[Author]

Posts