Oxygen Sass is a companion/helper plugin to WP-SCSS for working with Sass in Oxygen.

WP-SCSS can be used to compile .scss files but it relies on the directories for the input and output to be present in the theme.

Since Oxygen disables the theme completely, we need to come up with a way to change these directories to point to a different location that we have access to and that is what this plugin does.

Oxygen Sass plugin sets the value of WPSCSS_THEME_DIR constant to point to its directory and comes with scss and css directories.

In WP-SCSS’s settings, set Scss Location to /scss/ and CSS Location to /css/ and you are ready to use Sass features like Variables, Nesting, Partials Import, Mixins and Operators working in your Oxygen site.

This plugin also loads the compiled CSS file in both the Oxygen editor and frontend.

Watch this screencast for an overview:

Download from Github

References:

https://github.com/ConnectThink/WP-SCSS

https://engageinteractive.co.uk/blog/top-10-scss-mixins

https://codepen.io/dodozhang21/pen/KqxDE

https://wpdevdesign.com/how-to-push-footer-to-the-bottom-in-oxygen/

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • just moved a website from local to a server and I get this error from your plugin:

    “Sass Compiling Error

    /home/u104546863/domains/domainname/public_html/wp-content/plugins/wp-scss/cache/

    “File Permission Error, permission denied. Please make the cache directory writable.”

    Do you have any idea about this?

    On my local I don’t have this error.

  • Hi, is there any reason why I’m getting double slashes in my links from this plug?
    /plugins/oxygen-sass-master//fonts/lagos_light-webfont.woff2
    and
    /plugins/oxygen-sass-master//css/custom.css
    The paths in WP-SASS are as you say, /css/and /scss/
    The extra slash is confusing WP Rocket
    Thanks

    Oh, also, I had some trouble with css load order which I fixed by changing:
    oxygen_enqueue_scripts
    to
    wp_enqueue_scripts
    Now I can load the my sass generated css last, which is ideal for my overrides.
    Thanks for the excellent work—brilliant stuff.
    One last thing, adding the url:
    https://africankitchen.gallery
    below was rejected

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: