Это видео недоступно.
Сожалеем об этом.
REAL TIME CSS & SCSS Editing in Oxygen (Workflow Game Changer!)
HTML-код
- Опубликовано: 1 июн 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: 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.
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!
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 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
Of course more SCSS tutorials! The new way to go... An when is the WPCodeBox Tutorial coming out? 😛
Code box hands down one of the best addons I’ve bought for wp development
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.
More SCSS! This works awesome with the article card.
Yes,Kevin...More SCSS Please!!!
Thanks for brining the salt and the sass brotha! Appreciate you massively. 🙌
💪🏻
Yessss more SCSS. Thanks Kevin!
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"
Nice - Clean - More SCSS
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.
I like this workflow. More SCSS.
More SASS? We already get a lot of sass from you, Kevin! But yes, more SASS, 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!
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.
More SASS and CodeBox please!
More SCSS.
Best tutorial Kevin.
Thank you so much.
And yet another world discovered ! Thank you Kevin !
More SCSS + Oxygen tutorials! Awesome content! Thank a lot
MORE SCSS!! 😍
More SCSS.
Amazing as always Kevin.
Thank you a lot.
This is awesome....now I'm more excited to see the SCSS video..
More SCSS! and more “scroooooooooooll” :D
Thank you, Kevin! This was short concise and to the point
More SCSS. Excellent video.
Kevin, you've made me buy yet another plugin, thanks ;) Definitely more tutorials like this one!
More sass & SCSS!
More SCSS! 👍
More SCSS. Brilliantly delivered video btw!
More SCSS please!
MOOORE SASS! Thanks everso in advance ...
More SCSS please!
That's great!
More SASS. Thanks to you.
SCSS Training, no doubt!! This is a great video thank you for making this!
yes, more real world examples using SASS seems like a good plan.
Next Beta Release (this week) SCSS will be supported full (@use etc. will be supported too)
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! More SCSS! More SCSS! More SCSS! M....
(Thanks a lot Kevin!)
I like this approach. Hope they add "import export" option
MORE SASS PLEASE!
More SASS please!!!
AWESOME!!! Thanks, Kevin, for this tutorial! Oh, and more Sass, plz!
greate video... more SCSS :)
MORE SCSS!!
Absolutely more SCSS training!
More SCSS - love your tutorials.
so nice ! definitely want more scss videos !
I personally came to realization that I don’t like nesting in SCSS (for actual class names, nesting is still perfect for states like hover/active etc). Because it breaks programmer’s most used & most important tool: CMD + F. I prefer to represent parent-child dependency with indentations, where absolutely necessary. And yes, you have to type the block portion of BEM many times, but it beats not having any kind of search-ability in complex SCSS files.
With BEM it shouldn’t be a problem.
@@Gearyco BEM does help, but only a little. When your styles start adding up to 1000+ lines of code, it still has the tendency to turn into code soup. Sure, it's clean & pretty. But it's form over function, when it should be the other way around.
Ask yourself a question, is it easier to find, read & understand styles, when they are (a) defined & assigned to full BEM class names or (b) when they are all nested up and the class names are all broken up in chunks over various lines? Because in my experience, full names are way better & styles are easier to read, when they are not nested all over the place. And I am pretty damn good & very comfortable with SCSS, so it's not due to my lack of experience. I use SCSS for all sorts of things (separating CSS into multiple logical files, mixins, functions & variables), but I avoid nesting, whenever possible. Nested structure is just not good for ease of readability and makes search completely useless. All that time "saved" on not typing out the repeating "block" names will be quickly wasted making code harder to find & understand.
But that's just my 2c :)
Excellent video, more SCSS, please.
More scss please, thanks Kevin
"your entire life is writing article card"
That's a vibe.
More SCSS!!!
More SCSS! More SCSS! More SCSS!
Many thanks~
Fantastic
more SCSS please, thx :-)
Great Job!, I just joined BTW
Welcome!
+multi-monitor setup FTW !!
More scss please 😁
More SCSS please…
Very cool thanks. Inspires me to learn sass
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
Mind blown ! Thanks a lot !
Great tutorial, thank you!😀
More SCSS, just like more cow bell!
More SASS 🎉
Advanced Scripts must add autoreload changes function 😍
Just opened a ticket with them, that woudl be awesome and save me 150$ which I am tempted to spend right now ;)
@@chrisdian5832 Great. Writting custom css via oxygen css editor is such a pain, even fulltext searching doesn’t work
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.
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.
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
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.
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
Yea, more SCSS!
More SASS videos please! :)
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.
more sass please Kevin, thank you
Another gold bomb drop.... More sass
Definitely more SCSS
@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 (?).
more sass!!
Yes more
More of this scss shit please!
MORE SCSS
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.)
🤯 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.
& looks a lot like the %root% on bricks, witch is awesome that bricks does that, im sure is no quite the same but definetly helps me get the concept on my still chump mind
Not exactly the same, but very, very similar
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 :/
Not sure if anyone else is having issues, but I can't seem to see the video. Says no stream.
Same here.
Sorry, RUclips 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 RUclips caveat.
More SCSS!
You can probably improve that even further on macOS by moving each tab to their own full-screen then merge them so you have the WPCodeBox on one half of the screen on its own and then the other half of the screen will be the Oxy editor or front-end, whatever you prefer. Saves having to switch tabs each time.
Yeah, but not when I record at 1920 … not enough real estate
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.
More Scss please
More SCSS for bricks Kevin :)
Please Sir, may I have some more.... SCSS...
More SCSS