REAL TIME CSS & SCSS Editing in Oxygen (Workflow Game Changer!)
Vložit
- čas přidán 1. 06. 2022
- 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: digitalambition.co/inner-circle/
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 SCSS.
Amazing as always Kevin.
Thank you a lot.
More SCSS.
Best tutorial Kevin.
Thank you so much.
Kevin, you've made me buy yet another plugin, thanks ;) Definitely more tutorials like this one!
Yessss more SCSS. Thanks Kevin!
Of course more SCSS tutorials! The new way to go... An when is the WPCodeBox Tutorial coming out? 😛
Another amazing video. More SCSS!
Man.. :) you are he first wp developer who i truly respect! You give so much of value here ... amazing :) i fu**ing love it.
And yet another world discovered ! Thank you Kevin !
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.
so nice ! definitely want more scss videos !
Thank you, Kevin! This was short concise and to the point
Yes,Kevin...More SCSS Please!!!
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! ✊
More SCSS + Oxygen tutorials! Awesome content! Thank a lot
This is awesome....now I'm more excited to see the SCSS video..
More SCSS. Brilliantly delivered video btw!
Thanks for brining the salt and the sass brotha! Appreciate you massively. 🙌
💪🏻
SCSS Training, no doubt!! This is a great video thank you for making this!
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!
Nice - Clean - More SCSS
More SCSS! This works awesome with the article card.
Mind blown ! Thanks a lot !
Great tutorial, thank you!😀
More SCSS. Excellent video.
More SASS? We already get a lot of sass from you, Kevin! But yes, more SASS, please.
AWESOME!!! Thanks, Kevin, for this tutorial! Oh, and more Sass, plz!
More SCSS please!
That's great!
More SCSS - love your tutorials.
Code box hands down one of the best addons I’ve bought for wp development
I like this workflow. More SCSS.
Very cool thanks. Inspires me to learn sass
greate video... more SCSS :)
MORE SCSS!! 😍
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"
MOOORE SASS! Thanks everso in advance ...
More SCSS! More SCSS! More SCSS!
Many thanks~
Fantastic
Excellent video, more SCSS, please.
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!
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.
Absolutely more SCSS training!
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
More SASS and CodeBox please!
Thanks for your content always clear and funny! Id like to understand more SCSS case study and WPCODEBOX.
More scss please, thanks Kevin
More SCSS! and more “scroooooooooooll” :D
I like this approach. Hope they add "import export" option
yes, more real world examples using SASS seems like a good plan.
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
More SCSS please!
More SCSS! 👍
More SASS. Thanks to you.
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
More scss please 😁
Next Beta Release (this week) SCSS will be supported full (@use etc. will be supported too)
MORE SCSS!!
"your entire life is writing article card"
That's a vibe.
More sass & 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
Yea, more SCSS!
more SCSS please, thx :-)
+multi-monitor setup FTW !!
Great Job!, I just joined BTW
Welcome!
More SASS videos please! :)
More SCSS!!!
More SCSS, just like more cow bell!
MORE SASS PLEASE!
Definitely more SCSS
More SASS please!!!
More SCSS! More SCSS! More SCSS! More SCSS! M....
(Thanks a lot Kevin!)
Is there gonna be a tutorial about your wpcodebox setup?
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.
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.
🤯 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.
More SCSS!
more sass please Kevin, thank you
@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.
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 (?).
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 SASS 🎉
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 please
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 please…
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'
Yes more
More Scss please
More SCSS training please :)
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?
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.
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.
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
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.
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.)
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