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.
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.
Try this?:
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
And I added on to your codepen to show you what I mean, and why it doesn't work.
From what I understand, the #{variable} syntax tells it to just output the variable without actually doing calculations on it.