REAL TIME CSS & SCSS Editing in Oxygen (Workflow Game Changer!)
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2025
- Get WPCodeBox Here: geni.us/uu8jqqf
Let's be honest, the CSS writing workflow in Oxygen is not great. It creates a lot of kinks in the dev workflow, which I'm sure you've experienced.
So, let me ask you some questions:
Do you want to be able to write CSS in a dedicated stylesheet(s)?
Do you wish you could write CSS in an external stylesheet while still seeing your styling in real time in both the builder and the front end without refreshing?
AND ... Do you wish you could use the superpowers of SCSS on top of all that?
The clear answers for me: YES, YES, YES!
I'll show you how to make it happen in this video.
This is the workflow that I've switched to for all projects going forward. It's just too powerful and too convenient to ignore.
Get WPCodeBox Here: geni.us/uu8jqqf
Join the Inner Circle: digitalambitio...
Drop a comment if you want to see more SCSS trainings!
Again terrifically helpful tutorial. Keep SCSS & other training coming please ~
Yes, please Kevin!
Yes
Yes sir 💪💪💪💪💪💪
Yes, more SCSS!
More SCSS would be awesome. Excellent video.
More WPCodeBox, More SCSS - Kevin, really enjoyed seeing how to begin using WPCodeBox. I've seen some of your more recent videos but wanting a more overall video on WPCodeBox & SCSS. BTW, that darn "Fred" really is a pain isn't he? LOL
This is what I’ve been waiting for! Sass compiled live in browser direct from WordPress. I’ve never been a fan of O2 stylesheets so write my scss locally in VS Code, compiled automatically using Codekit but then had to upload to the server and refresh the front end. Even worse, the builder wouldn’t update until I refreshed that so often I’d be working in the builder, not seeing the updates until I’d finished the design 😩
This solution is perfect! ✊
quick tip in regards to workflow in 4.0: oxy now allows you to double click the names of elements to rename them, instead of having to click edit + rename. just a little thing with a big impact. love your content btw ❤️
Good to know!
Of course more SCSS tutorials! The new way to go... An when is the WPCodeBox Tutorial coming out? 😛
Thanks for brining the salt and the sass brotha! Appreciate you massively. 🙌
💪🏻
More SASS? We already get a lot of sass from you, Kevin! But yes, more SASS, please.
Man.. :) you are he first wp developer who i truly respect! You give so much of value here ... amazing :) i fu**ing love it.
Fantastic tut again. I have started using the WPCodeBox with Bricks and the speed in the workflow is incredible. Definitely would love to see more stuff on SCSS - it looks juicy.
Just bought wp codebox following your advice, it's really a good tool! Looking forward to see some SCSS e wp codebox tutorial on YT or ininto the Inner circle. Your contents are on another level :)
Awesome, thank you!
Yessss more SCSS. Thanks Kevin!
And yet another world discovered ! Thank you Kevin !
Code box hands down one of the best addons I’ve bought for wp development
Another amazing video. More SCSS!
More SCSS! This works awesome with the article card.
This is awesome....now I'm more excited to see the SCSS video..
More SCSS + Oxygen tutorials! Awesome content! Thank a lot
Thank you, Kevin! This was short concise and to the point
More SCSS please!
That's great!
More SCSS.
Best tutorial Kevin.
Thank you so much.
Yes,Kevin...More SCSS Please!!!
First we all Need More Cowbell
then we Need More Coffee
now we NEED MORE SCSS.
the auto refresh literally made me LOL, smile and almost get a little too excited. ;-)
F'ing Fred. c'mon, you can't be a 70 year ago designer. But I know *exactly* what you mean. "Less white space" "Too much space" "cram all stuff at the top of the page"
More SCSS. Excellent video.
More SCSS. Brilliantly delivered video btw!
Kevin, you've made me buy yet another plugin, thanks ;) Definitely more tutorials like this one!
Nice - Clean - More SCSS
More SCSS.
Amazing as always Kevin.
Thank you a lot.
Yes! Thanks for adjusting the display size. On my 4k monitor, it's still rather small. Lol. But I have SwitchResX -- 2 clicks and I have a plethora of display sizes from 4k down to 640x512 to choose from. : D
I like this workflow. More SCSS.
Awesome Kevin. You're never short to deliver great stuff. Question. For an existing site, can the css in existing stylesheets be copied and pasted into WPCodebox and then the stylesheets deleted?
Depends on your setup and what you're trying to accomplish. If you mean like ... can you take the CSS out of an Oxygen stylesheet, move it to codebox, and then delete the oxygen stylesheet ... yes.
@@Gearyco Yep. Exactly! Thanks Kevin
SCSS Training, no doubt!! This is a great video thank you for making this!
More SASS and CodeBox please!
Another thing about sass variables is they compile to native css.
Ex css: --color-primary: white; if you say background-color: var(--color-primary) ; and that is what is in the css. Not always compatible with browsers.
Ex scss $color-primary; white; if you say background-color; $color-primary; the css ends up being background-color; white; Compatible pure css.
Kevin thanks for this and I am looking forward to more scss. I also ended up buying and this is a lot easier than using Visual Studio.
Also for anyone on the fence it is 20% off right now.
Yes, but all relevant browsers support custom properties now. Every major website uses them.
so nice ! definitely want more scss videos !
More SCSS - love your tutorials.
More scss please, thanks Kevin
I like this approach. Hope they add "import export" option
More SCSS, please!
Way more SCSS please!
AWESOME!!! Thanks, Kevin, for this tutorial! Oh, and more Sass, plz!
SCSS partials support has been released. I've yet to try it out (and am about to on this next project); but WPCodeBox *seems* to be aiming to become a native WP IDE. I doubt it's anywhere near my dear Sublime; we'll see. WPCB has Emmet tab autocompletion; and tab autocompletion for AutomaticCSS variables; can't wait to give it a whirl. Question: Is there a way to grab your A-CSS vars using SCSS `$` syntax, instead of the CSS custom properties `var` syntax (in WPCB)? I appreciate you.
Excellent video, more SCSS, please.
Very cool thanks. Inspires me to learn sass
greate video... more SCSS :)
What about caching of this css file? I mean I think Oxygen has a function to cache css added in Oxygen css editor. And this method needs extra cache plugin (?).
Great tutorial, thank you!😀
yes, more real world examples using SASS seems like a good plan.
More SCSS! 👍
MORE SCSS!! 😍
More Scss!
I would never stop following your videos.
One question: is it possible to use only Wp Code Box instead of Code Snippet?
Great Kevin, thank you and congratulations!
Yes
recoda also lets you write css in a separate window and it reflects on oxygen builder, with live sync even :D
Oh sweet. I’ll check it out!
but if I'm not wrong the problem in recoda the css is still gone when another editor tab is open and you hit save.
MOOORE SASS! Thanks everso in advance ...
More SCSS! More SCSS! More SCSS!
Many thanks~
More SCSS! More SCSS! More SCSS! More SCSS! M....
(Thanks a lot Kevin!)
More SCSS! and more “scroooooooooooll” :D
Next Beta Release (this week) SCSS will be supported full (@use etc. will be supported too)
More scss please 😁
One thing about the Oxygen built-in CSS editor is you can use color(1), color(2) etc., in your stylesheets to use the colors from the Oxygen global color settings. Does WPCodeBox recognize those variables too?
Not sure. Haven’t tested it. I use ACSS so don’t have to use oxygens color variables.
@Digital Ambition Thanks for replying. I assume you mean "SCSS" right? ;)
Depending on the sites you build and who manages them after you're done, you might find the Oxygen global color variables really useful anyway because of how they integrate into the color pickers throughout the editor.
I use SCSS on some non-Wordpress projects, but so far my workflow in Oxygen is to set the global colors, then assign them to CSS variables using Oxygen's color(n) syntax. That way I can get by only defining colors in one place, but have access to them in CSS and in the main editor.
It would be EXTREMELY handy to be able to bring the Oxygen global colors into the SCSS workflow. I might have to go ahead and pony up for a license just to test this. (FWIW, this is an advertised feature of DPlugins Scripts Organizer, which looks to be very similar to WPCodeBox.)
More SASS videos please! :)
"your entire life is writing article card"
That's a vibe.
More SASS please!!!
more SCSS please, thx :-)
Fantastic
@digital ambition you made me switch to wpcodebox and i love it the only thing i cant seem to make work is making sure that the stylesheet is loaded last to prevent !important overwrites. No matter what number i use in the priority field. Do you know a fix for this
I believe next update has loading order control. That loading order box isn't actually changing the loading order as far as I know. It's for internal ordering.
More SCSS please! Super video Kevin. This makes so much sense.
Can I ask on the demo site you showed, you have style sheets for accessibility (love to see what’s in there btw) forms, buttons etc - do you now put all code into the code box scss file?
That’s just a training site so most of those things are just quick tests or are empty. But yeah, trying to keep everything in codebox now
Absolutely more SCSS training!
More sass & SCSS!
Mind blown ! Thanks a lot !
MORE SASS PLEASE!
🤯 this is amazing! Do you still recommend creating a CSS stylesheet for each area (i.e. blog, header, etc)? Or Just one main global css stylesheet? Also, more SCSS please!
Well, once codebox supports SCSS partials then you’ll create a partial for each use case and then it’ll all compile into one sheet. Codebox doesn’t combine sheets like oxygen does so it’s best to do everything in one sheet.
Not sure if anyone else is having issues, but I can't seem to see the video. Says no stream.
Same here.
Sorry, TH-cam is lagging today saying "still processing." Not sure what's up with it. Try refreshing in a bit.
@@Gearyco oh ok gotcha! Hope it'll show soon for us. Now it plays an ad but no video yet lol. Good to know for future about this weird TH-cam caveat.
I'm confused. I dont know how to have organized workflow in oxygen. When to you use oxygen tool panel and when to use stylesheets?
Use the tool panel for as much as possible. When it’s not possible or practical to use tool panel use stylesheet.
Thanks Kevin. Have you also tested that it also works with Bricks?
Not yet, but I don’t see why it wouldn’t. I’ll give it a shot.
MORE SCSS!!
I initially got into Oxygen because I liked what Webflow was doing and as a developer I saw the flexibility it offered. The more I learn about these workflows, the more I wonder what the value is in speed for oxygen. If I can use Emmet and can crank out tons of HTML very quickly, SCSS locally and have the full power of SASS (including partials), the hot-reload plug-in in Local to rapidly see changes, what are the advantages of Oxygen vs building a custom theme? Is it that Oxygen handles all text to be translatable? Is it that Oxygen is an abstraction-layer over Wordpress so our sites are better future-proofed?
Forgive me if there's an obvious answer I'm missing. I'm just trying to understand the benefits.
Are you well-versed in php and javascript?
@@Gearyco I'm fluent in javascript and familiar enough with PHP that I've built a dozen projects or so with it.
@@michaelprovenzano8911 then you may want to build a custom theme. It all depends on what you feel is the most efficient workflow.
@@Gearyco Thanks, Kevin!
More SASS. Thanks to you.
I really love this stuff but i have one question as you create your class names in oxygen you target them in your stylesheet but what i noticed is that that same class is generated as empty in universal.css is this correct behaviour
I consider it a bug in oxygen. They should definitely fix it.
@@Gearyco thank you for your reply i have one more question. Have you worked with scripts organizer and what are its cons if you compare it to wpcodebox. And also love to see more scss related stuff
Hi, I tried styling via wpCodebox, but somehow oxygen CSS still overrides my wpCodebox CSS. How can I identify where the problem is? Or is it possible to completely disable Oxygen styling (would it cause any problems though)?
They’re releasing an update to control the load order of CSS which will resolve this.
Thanks for your content always clear and funny! Id like to understand more SCSS case study and WPCODEBOX.
More SCSS! I have been a user of WPCodebox since nearly the beginning. Great software.
Do you just use one SCSS snippet for the entire site or do you break it down and use the condition builder to only load the SCSS on the pages that need it to keep loading of unused CSS to a minimal?
unused CSS is rarely a problem unless you're using a massive framework.
Hi Kevin, thanks for all the content you put out!
I'm having trouble getting this to work... the SCSS snippets in WPCodeBox and WPCodeBox2 both have no effect on my oxygen builder or the front end and I have no idea why. I thought it was just the dev mode at first but no SCSS at all is getting through.
I've gone and disabled all other plugins and nothing seems to work. The other snippets I have seem to work (the full-width snippet for example) but it must be a SCSS/Oxygen clash...
Have you come across this issue yourself? I purchased this and I'm really excited to use it so its really disappointing that I can't...
Thanks again
Update: I got it working, but only on WPCodeBox and not WPCB2 for some reason. I set the code to 'Inline' and not 'external file' and that made it work, but still no joy on the updated version of CodeBox :/
More SCSS, just like more cow bell!
+multi-monitor setup FTW !!
Great video, would it make sense to be able to "switch on" SCSS mode, on the ACSS cheat sheet, so that we can use it for copying classes into WPCodebox the way you've shown?
Not sure what you mean.
@@Gearyco No worries, what I meant was just that, for example, instead of using 'var(--accent-light-trans-10)' you could enable SCSS mode and it became '$accent-light-trans-10'
Great Job!, I just joined BTW
Welcome!
Thanks a lot, looks amazing! The only problem I have is that when I save my oxygen edits, and reload the website page, the css generated by wpcodebox is not applied. I have to resave wpcodebox every time i save my oxygen changes to apply my code. Do you have any solution?
Did you make sure to check all the right boxes?
more sass please Kevin, thank you
Please show us how to achieve this in Bricks! I would love to learn how to use ACSS in Bricks
Works the same way in Bricks. But, tutorials coming soon.
Yea, more SCSS!
What would this mean for ACSS? Will there be branching functionality here? Perhaps this is part of Frames?
Probably doesn’t mean too much, honestly. ACSS all works behind the scenes. Don’t want to have people needing to touch code.
Do @mixin and @include work with wpcodebox?
Yes
Awesome! Loving Codebox. Are you able to synchronize scripts across all sites? If so, I've GOT to update my client sites to this!
Absolutely. It syncs across all your sites.
@@Gearyco OMG 🤯
More SASS 🎉
More SCSS!
More SCSS please
Definitely more SCSS
More SCSS please…
Do you have the option to save cloud snippets privately? I see there is a public library of code snippets.
Yes private to your license.
@@Gearyco great! I just purchased an agency license.
I loved SCSS for years but native CSS variables are much more useful. If there's a way to use them in SCSS, it'd be good news to me.
Custom properties work in SCSS. I wouldn’t say they’re better, they just work differently. They’re actually more limited than SCSS variables. The only limitation with SCSS variables is that they can’t be used on the front end. But you can easily turn any SCSS variable into a custom property so you have the powers of both at all times.
@@Gearyco Great. Never found a Sass parser that would handle them. Turning an scss var into css cp always threw errors in the couple of Sass processors I've tried. WPCodeBox manages?
@@paulbatey8067 I haven't found one that can't. Are you sure you're interpolating it properly?
@@Gearyco You might be on to something there!. Thanks.