SCSS Tutorial with Wordpress and WPCodeBox (Part 3: Extend)

Welcome back to our SCSS tutorial series in Wordpress using the WPCodeBox plugin! This is Part 3 of our series, and today, we're going to dive into the power of the @extend feature.

Whether you're a Wordpress user or a Bricks builder developer, understanding the @extend function can greatly improve your workflow. It allows you to share a set of CSS properties from one selector to another. Today, we'll be using it to apply the primary button styling anywhere on your website.

My goal with this series is not just to introduce new tools, but also to empower you in your development journey. I want you to discover that creating beautiful, efficient, and maintainable websites can be easier than you imagined.

Make sure to subscribe to our channel to stay updated as we continue to unravel the capabilities of SASS and SCSS with Wordpress and the WPCodeBox plugin. I appreciate your support!

Mixin Documentation:

Tools Used:

WPCodeBox (affiliate)

__________________________________________________

Socials:

Buy Me a Coffee:

Chapters
00:00 - Intro
00:19 - Button Style on Form
03:17 - Button on Header
07:02 - Outro

[sorpandello]

Super powerful property! Thanks for sharing all this knowledge with us

[nostressirish]

Great to see how to use SCSS and as a bonus it was cool watching how to target elements.

[AmandaLucaseu]

This is so great - mind has been blown. Big fan of your videos.

[eucalyptech]

Super helpful content, thank you Nicholas !

[jamesround]

Been looking for decent, clear and not epically long videos covering the basics of SASS and SCSS. Great videos, watched all 4. Keep making more content! 👍

[grfxninja]

Loving the series mate. Nice, clear & simple explanations of SCSS tricks that I haven't leaned yet HAHA. Good work 👍

[studiosh]

Another very clear explanation. Thank you! I look forward to some lessons on partials and organizing files.

[kareem]

Keep doing what you are doing, GOLD! Neat explanation and straightforward.

I have a question regarding this & the next lesson too.
I tend to organize the SCSS files into folders inside WPCodeBox e.g. Header folder.. SCSS files.
Any thoughts on this? A recommendation is appreciated. or to wait for the next lesson 😁

Thx for all

[sbw]

So we can't use @extend to take for example the class of Automatic.css?