Intro To SASS and SCSS with Wordpress and WPCodeBox (Part 1: Nesting)
Vložit
- čas přidán 29. 07. 2024
- Welcome to the first part of the series on using SASS and SCSS with Wordpress using WPCodeBox! If you're a Wordpress user who wants to streamline your CSS process, this series is for you.
In this episode, we delve into the world of nesting CSS, a method that can drastically improve the readability and maintainability of your CSS code. With nesting, you'll significantly reduce the amount of CSS you write.
Through this series, we'll be exploring other powerful features of SCSS like partials and @mixins. Our goal is to make your Wordpress development process as efficient and enjoyable as possible, and SCSS is a key part of that.
If you found this video helpful, don't forget to hit the like button and subscribe to our channel for more Wordpress development tips and tutorials. Stay tuned for the next part in this series where we'll be diving deeper into the wonderful world of SASS and SCSS with Wordpress and WPCodeBox!
Tools Used:
WPCodeBox (affiliate)
wpcodebox.com/?ref=249&campai...
__________________________________________________
Socials:
/ nickarceco
Buy Me a Coffee:
www.buymeacoffee.com/nickarce
Chapters:
00:00 Intro
00:41 Styling Form with No Nesting
04:11 Transforming CSS with Nesting
06:33 Problem of Not Nesting
07:07 Finishing Form
08:25 Button Styles with Nesting
09:58 Outro
Thanks Nicholas, my. first into to SASS.
The thousandth subscriber. Yeah~~~🎉🎉🎉
WOOHOO Thank you for that! 🥳
VERY well done! THIS is what web "development" is!
Amazing. Can't wait to watch the next episode. SCSS is 🔥
Thank you Oscar! I sincerely hope you find it helpful!
WP Codebox ROCKS - and so does Pixel Strata! Terrific tutorial Nick. Thanks!
SCSS brings happiness 🥰Nice work! Thx.
Keep 'em coming Nicholas!
Another great tutorial! I feel I was like a beta tester for these SASS/SCSS lessons 😂😉
😆you technically were a beta tester. After doing a few one on one tutorials for SASS I realized I just needed to start making youtube videos.
Very nice introduction Nicholas, thank you !
no thank you!
Amazing tutorial!🎉🎉🎉
Thank you! 😄
Loving your videos. Got your channel with the faq video. No regrets ❤️ your videos are on point
Thank you Farhan! means the world honestly
Enjoyed your video. For the next lesson, please zoom into the code so it is readable on an iPad.
Thank you Nora! This is excellent feedback. I’ve already finalized part 2 which will be released on Monday but I will reshoot part 3 and part 4 to have bigger text to make it easier to see. Thank you for the feedback!
Good tutorial. Did you overwrite the ACSS class .btn--action? The styling doesn`t work on my end and I think because .btn--action is a ACSS class.
I turned off all button styles within ACSS dashboard so that I can control them with SASS.
@@nickarceco oh, didn't heard when you said in the video. Thanks.
@@liviustanciu165 i think i forgot to mention it for the ACSS users.
So, when you say you "Given the From a Class", where did you do that? Was that in Form Settings > Other > "Extra CSS Form Class"? It says, "This feature is only available in pro version of Fluent Forms" under there. That's what you used, right? Or is there some other way you added a class?
I added the class to the element in bricks. For fluent forms could either be on the shortcode element in bricks or the fluent form element in bricks extras.
@@nickarceco , thanks!
Why doesn't use ".form--light, .form--dark {}"
I did use those classes. Unless you mean something else