SASS support

[ghost]

it would be amazing if we could use SASS inside Oxygen Stylesheets, would make life so much easier! You could use a php Compiler like this one here: https://github.com/leafo/scssphp

along with that, a better code editor would be amazing. you could include Monaco (https://microsoft.github.io/monaco-editor/) and ACE (https://ace.c9.io) and have the user choose for their favourite.. the current code editor is pretty basic, even Elementor CSS editor is more advanced ;)

[jwurmitzer]

I would love to see strong support for SASS and CSS integration. A simple CSS text file will do. Don't care about integrated code editors much, as they all suck compared to VSCode and SublimeText.

[ViktorIwan]

Vote + 1 for SASS

[HeadBit]

+1 for SASS integration, including a code editor that can provide auto-suggestion/completion and Emmet. P L E A S E (... and thank you).

[timpixel]

Check out PostCSS as well? https://postcss.org/ Perhaps most people will still prefer sass, its more established.

[benhohner]

Monaco editor with SASS and live code updates would be glorious.

[alexanderkladov]

To anyone still looking for a SCSS solution for Oxygen, check out this article: https://wpdevdesign.com/oxygen-sass-plugin/

I've been using WP-SCSS plugin for a while with Divi & other theme-based builders and it's been absolutely fantastic. So it was a bummer that I couldn't easily use it with Oxygen.

But the guy in the article wrote a simple plugin to make it compatible with Oxygen too.

Look through the source code of his very simple WP-SCSS helper plugin for Oxygen. Pay attention to the function wp_scss_set_variables() on Lines 52-59, as it's very useful. You can use this function to inject all sorts of variables into your SCSS (like global colours, sizes, widths etc). In the past I've also taken it a step further and used this wp_scss_variables hook to provide a list of variables which were true/false, depending on whether a certain plugin was active or not. And then inside my SCSS I used a function like this to include the CSS only when necessary:

@if $woocommerce-is-enebled == true {
  // WooCommerce styles here
}

That way I had 1 unified SCSS styles for many projects, which contained lots of style fixes/improvements for popular plugins, while the final CSS output was clean, because it only included styles for those plugins, which were enabled on the site.

NOTE: Make sure you comment out Line #34 on Production environment, or you'll suffer performance issues (your SCSS will be re-compiled every time).

[shoelaced]

Yes, this would be great. At the moment it's not possible to put in custom CSS that targets a child element without putting it into a global CSS file, so I've got all these styles that are like .someclass a:hover in various global CSS files that load on every page, even though they're only needed for one element on one page. If we could target children in the custom CSS editor for the individual blocks, and better yet create a master global .SCSS file with variables, mixins, etc., that we could use and compile on a per-block basis, it'd simultaneously make development easier and improve performance on the frontend.

[max-got]

+1

[avocadesign]

We don't/can't use stylesheets in Oxygen because we lean too heavily on Sass to create CSS variables and run our entire build framework. We have to rely on third party tools like Scripts organiser for this. Would be great to do some of that within oxygen.

[Spellhammer]

We're investigating implementing multiple improvements to our CodeMirror implementation. This probably won't include Sass support, but it's something we might look into.

[Spellhammer]

Opened a separate issue since we have CodeMirror improvements in the pipeline: https://github.com/soflyy/oxygen-bugs-and-features/issues/3215

Renamed this issue to pertain only to Sass support.

[perrelet]

For those who write their stylesheets directly in an IDE / text editor instead of CodeMirror, you might want to check out our SCSS plug:

https://github.com/perrelet/sassy

Amongst other features, it converts Oxygen's global settings into SCSS variables.

[sergiubacioiu]

+1

[pascalinger]

+1 for SASS/SCSS

[HeadBit]

+1 for SASS/SCSS