Incompatible units in scss calculations

[JoomFX]

Hey guys,

The new SCSS compiler seems to be activated by default in Gantry 5.5 for all themes, not only for the themes that require it.

Anyway, if the user uses a value in any unit different than rem in the Breakpoints section, they will get an error.
This screenshot shows the issue in a clean Helium RocketLauncher installation.

This will need to be fixed in some of the templates that have such calculations. Here's another issue for example.
We also have few templates that need to be fixed 😃

Anyway, I will open a new PR that fixes the issue in Gantry (and Helium).

[jpolecheck]

I'm using the Notio template from RocketTheme with rem as the Breakpoints data, but am still getting the CSS issue. Is there another area I need to update?

[mahagr]

Try first to install the CI build from https://gantry.org/downloads

If that doesn't work, the theme may have overrides for breakpoints. @hexplor is working on updating themes, so he may know if there's more to it.

[jpolecheck]

The joomla-pkg_gantry5_develop.zip file, correct?

[mahagr]

Yes.

[jpolecheck]

No go. Recompiled the CSS and got this error message here: 500 Internal Server Error Oops, CSS Compilation on file 'notio.scss' failed on error: Incompatible units px and rem.: /home/v9nksvbg20o9/public_html/atvmn_2021/templates/rt_notio/scss/notio/sections/_sidebar.scss on line 50, at column 17 Call Stack: #0 mixin breakpoint /home/v9nksvbg20o9/public_html/atvmn_2021/templates/rt_notio/scss/notio/sections/_sidebar.scss on line 57 #1 import /home/v9nksvbg20o9/public_html/atvmn_2021/templates/rt_notio/scss/notio/sections/_sidebar.scss /home/v9nksvbg20o9/public_html/atvmn_2021/templates/rt_notio/scss/notio.scss on line 80 #2 import /home/v9nksvbg20o9/public_html/atvmn_2021/templates/rt_notio/scss/notio.scss (unknown file) on line 1.

[mahagr]

That one you need to fix manually if you want to get the site up ASAP.

Just edit templates/rt_notio/scss/notio/sections/_sidebar.scss line 50 and change it a bit. Here's example on what kind of changes you should make:

b16d10e (<- click)

Just add the calc(#{ and } just like in the example above.

CC @hexplor If you were not aware of the issue.

[mahagr]

I reopen the issue so it's easier for others to find.

[jpolecheck]

I may have to wait for the theme update on this one. 😊 Definitely scares me stomping around in the SCSS files.

[mahagr]

You can always take a backup from that file. It should be really simple change, just make the browser to do the calculation instead of SCSS (which doesn't really support mixing units).

[jpolecheck]

Tried a couple things, couldn't get it to work. Can I Venmo someone on your crew to take a crack at it? :)

[mahagr]

@jpolecheck RT team is trying to get new versions of the themes out starting from next week.

[Avgrafica]

Same issue with Hydrogen 5.5.7
I tried to modify the _flex.scss file by forcing the calc (# but it didn't work

Edit
Ok, also modified file _breakpoints.scss, now work. Hope to not must do this modification at every update