Hey there,
I know this isn’t necessarily a problem caused by Sage, but I wasn’t sure where else to ask.
When I set a border radius to the following in a scss file: “border-radius: 510px/50%;”
After compiling I get the following result in browser: “border-radius: 10.2px;”
Does anyone know why this is being calculated after running gulp?
According to SASS documentation, calculation should only occur if a variable is used in conjunction with a / ?
Thanks guys.
J
Could it be the (PostCSS) minifier/plugin instead - that runs after SASS?
SCSS is simply doing math for you. 510/50 = 10.2. What is your desired result?
Yeah I understand that SCSS is doing the math. I don’t want it to do any math 
However ‘border-radius: 510px/50%;’ is a valid shorthand expression of the border radius property.
Hence the conundrum I find myself in… The desired result is for the style to remain ‘border-radius: 510px/50%;’
Hmmm i’m not sure how you’re going to get that result then without SASS not interfering. I would look into the long hand approach.
Have you tried interpolation? Like described here?
This is where I’m getting confused, supposedly if I write an expression like ‘510px/50%’ according to SCSS documentation it shouldn’t be calculated.
Calculation should only occur automatically if I use spaces or include a variable rather than a value.
So I shouldn’t really need to use interpolation, this should only be required if I was using a variable.
However I tried it for the sake of my sanity and when I do, the calculation still occurs. 
You tried interpolation? I get what you’re saying but I would take a step back and see if there’s another way of accomplishing this. Do you have a codepen setup?
I’m unable to replicate this on either Sage 9 or Sage 8. In both cases, I get border-radius: 510px/50%; after compiling.
Which version of Sage are you using?
Can you post your project’s gulpfile.js (or webpack config, if you’re on Sage 9) and package.json?
@encryptdesigns Yep I’ve tried interpolation, no dice. 
@alwaysblank I’m using Sage 8 (legacy site) and the config files are as below;
gulpfile: https://pastebin.com/d9SJYHEF
package: https://pastebin.com/0J0YPrFe
Cheers.
In your package.json, change the version of gulp-if from ^1.2.5 to ^2.0.1, then run npm install to update it. This worked for me. I’m not sure why, but…it did. 
Awesome! That did the trick… Thanks very much for your help @alwaysblank
Seems weird, especially as it’s compiling correctly on a colleagues PC with an identical setup.
Can I ask how you went about troubleshooting this?
I’ve got five bucks on “if it doesn’t work and you have nothing to lose, try updating stuff”.
I cloned a fresh copy of Sage 8.5.1 and verified that it had the correct behavior (it did). Then I replaced the list of dependencies in package.json with the dependencies from your package.json and verified that it exhibited the incorrect behavior when built (it did).
From there, I just started one by one adjusting the versions of dependencies to match those in the known-good configuration (Sage 8.5.1), and running a new build after each change to see if that dependency was the bad one. Once I got to gulp-if the behavior changed, so I knew that was the problematic version!
If you can, I’d appreciate it if you could mark my answer as a solution.
Sweet! Marked and thanks again.