{"id":865,"date":"2018-10-14T02:19:01","date_gmt":"2018-10-14T02:19:01","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=865"},"modified":"2021-03-30T09:46:14","modified_gmt":"2021-03-29T22:46:14","slug":"oxygen-sass-plugin","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/oxygen-sass-plugin\/","title":{"rendered":"Oxygen Sass plugin"},"content":{"rendered":"\n<p>Oxygen Sass is a companion\/helper plugin to WP-SCSS for working with <a href=\"https:\/\/sass-lang.com\/guide\" target=\"_blank\" rel=\"noopener\">Sass<\/a> in <a href=\"http:\/\/oxygenbuilder.com\" target=\"_blank\" rel=\"noopener\">Oxygen<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-scss\/\" target=\"_blank\" rel=\"noopener\">WP-SCSS<\/a> can be used to compile .scss files but it relies on the directories for the input and output to be present in the theme.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Oxygen Sass plugin sets the value of WPSCSS_THEME_DIR constant to point to its directory and comes with <code>scss<\/code> and <code>css<\/code> directories.<\/p>\n\n\n\n<p>In WP-SCSS&#8217;s settings, set Scss Location to <code>\/scss\/<\/code> and CSS Location to <code>\/css\/<\/code> and you are ready to use Sass features like Variables, Nesting, Partials Import, Mixins and Operators working in your Oxygen site.<\/p>\n\n\n\n<p>This plugin also loads the compiled CSS file in both the Oxygen editor and frontend.<\/p>\n\n\n\n<p>Watch this screencast for an overview:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"d1Lj4POWFJpe5whaZxyuGkMbNHCn9T7KiQgXAr32Sscl8tzBRfVvm6oEI\"><iframe loading=\"lazy\" title=\"Oxygen Sass plugin\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Ia7WFY0ydlo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<p><a class=\"button\" href=\"https:\/\/github.com\/srikat\/oxygen-sass\" target=\"_blank\" rel=\"noopener\">Download from Github<\/a><\/p>\n\n\n\n<p>References:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/ConnectThink\/WP-SCSS\">https:\/\/github.com\/ConnectThink\/WP-SCSS<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/engageinteractive.co.uk\/blog\/top-10-scss-mixins\">https:\/\/engageinteractive.co.uk\/blog\/top-10-scss-mixins<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/dodozhang21\/pen\/KqxDE\">https:\/\/codepen.io\/dodozhang21\/pen\/KqxDE<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-wpdevdesign wp-block-embed-wpdevdesign\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"9wqXSFbfzpWZMKP4ogaJhRA8Nd5mnCU7TLIV3OvjBxYk0tyE6iDGlr1ce2\"><blockquote class=\"wp-embedded-content\" data-secret=\"8rZtVx2Nfz\"><a href=\"https:\/\/wpdevdesign.com\/how-to-push-footer-to-the-bottom-in-oxygen\/\">How to push footer to the bottom in Oxygen<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;How to push footer to the bottom in Oxygen&#8221; &#8212; WPDevDesign\" src=\"https:\/\/wpdevdesign.com\/how-to-push-footer-to-the-bottom-in-oxygen\/embed\/#?secret=v7mT0jBP01#?secret=8rZtVx2Nfz\" data-secret=\"8rZtVx2Nfz\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/span>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[63,64,2],"tags":[107,114,23,115],"class_list":["post-865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-content","category-oxygen","category-plugins","tag-oxygen-plugin","tag-sass","tag-screencast","tag-scss"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2018\/10\/oxygen-sass.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2018\/10\/oxygen-sass.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=865"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/866"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}