Avoiding CSS Code Redundancy -- SASS Extend Tutorial

-- Today, we're going to hop into the world of Sass and look at a use case for using Sass's "Extend" feature, which allows you to avoid typing the same CSS properties throughout your code!

Codepen demo for this tutorial (not responsive, view on desktop!)

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!


^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -



Come to my discord server or add me on social media and say Hi!

[DesignCourse]

What other topics do you want to see me cover?

[WebfulCreations]

Probably your Daughter behind you :) She was able to put smile on my face . Hello to her! :)

[beinyourguard]

Holy crap, I must say, I got frightened at 0:24 lmao

[banoulka]

Absolutely love every single one of these videos honestly they’ve helped me so much lately

[NbaLiveever]

The video barely started and I already got a laugh in right from the intro 😂

[t-consult]

Great SASS Tutorial! I am taking a bootcamp and you videos on SASS are incredibly helpful! Thanks!

[maxkinli]

0:40 OMG i almost die from heart attack xD

[ademineshat]

Very nice and clear!
Just schrink that command line down, even if it pops up, it will be small 😂

[edwardtofan]

"if you click on this text, it's montserrat, OF COURSE" :)) Good content there Gary, keep it up!

[hiwayshoes]

Hi Gary! Great tutorial as always, your videos are never a waste of time! Thanks for all your helpful content. Would you consider covering images in an upcoming video? I like using my own images as opposed to stock photos, and I can’t seem to wrap my head around what image sizes I should be using. I know how to resize them for both file size and resolution, and also keeping the aspect ratio, but then I get stuck wondering how to tell if I should use (for example, using a 4:3 aspect ratio here) a 1920x1440 banner vs a 1600x1200 banner, or on smaller images if I should use 800x600 or 640x480 or 480x360, etc. I hope you consider publishing a tutorial on this. I’ve read a ton on this subject but nothing seems to click. Thanks again for all you do... Cheers!

[RodrigoMendoza]

Is there a "sidebar" tag in HTML? 😐 I only know about "aside".

[JivanPal]

Just a minor note at 8:15 — `&` is not necessary there, since it is at the start and is immediately followed by a space. That is, `& > p` is equivalent to `> p`.

[hamidrezaashkiyan]

You could disable sass compiler output in vs code setting. there is a check box for it. I had same issue. And thanks again for great contents.

[antusaha]

Hey Gary, you can just turn off the setting for Live Sass Compiler so that it won't pop up every time you compile(or save in this case). :)

[parthkumarchaudhary]

Whatever I loved that brake in intro *ss one, #lol

[devilreaper]

which one is better for learning sass or scss...???

[pax]

Hey Gary! Love your channel, thank you so much for all of the great content.. I was wondering what LED light you use to light your room in the background? Thank you kindly!

[DaggieBlanqx]

Pair programming is cool, your daughter was there to help you debug... haha!

[me_rinta]

What’s the difference between using “extend” and “include” with mixins?

[omeralsoma_]

I think JavaScript will be nice cause you don't have video on it for little while JavaScript in general