Failing to properly define and use SCSS variables for media queries

Dear cwicly community,

I’m trying to use variables for my media queries so that I can define all breakpoints in one central location and improve maintanability of my codebase.

I’m running Wordpress 6.4.1 and cwicly 1.3.4. (also tried on cwicly

My first approach simply was to define some CSS variables in :root, but I’ve read here that you can’t use native CSS variables in media queries.

So, inspired by a workaround I found here, I’ve instead been trying to define some SCSS variables globally in a global stylesheet so that I can use them everywhere else in the cwicly editor.

For some reason the SCSS variables don’t get recognised in my custom CSS code I’ve attached to a couple blocks on the page. In fact, the SCSS variables don’t even appear in the global stylesheets CSS file that cwicly generates on the front end.

I enabled the SCSS compiler and when I define an SCSS variable and directly use it in the same custom CSS window in the editor, the variable gets recognised – so the problem does not seem to be that SCSS in general is disabled or sth. I’ve read that you can use SCSS variables from other CSS files with the @use command, but I don’t see how I can do that if the SCSS variables seem to get ignored in the global stylesheets.

Does anyone have an idea on what I’m missing here? If you need any more information on how I have set up my project, let me know :slight_smile:

Thanks a lot!