SASS Border Radius

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.

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 :slight_smile:

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. :confounded:

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?

1 Like

@encryptdesigns Yep I’ve tried interpolation, no dice. :frowning:

@alwaysblank I’m using Sage 8 (legacy site) and the config files are as below;




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. :confused:


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? :slight_smile:

I’ve got five bucks on “if it doesn’t work and you have nothing to lose, try updating stuff”.

1 Like

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. :slight_smile:

1 Like

Sweet! Marked and thanks again.