Avoiding CSS Code Redundancy -- SASS Extend Tutorial

[@DesignCourse]

What other topics do you want to see me cover?

[@xrishi20]

CSS 3D Animations (Parallax)

[@shubham-jha]

Saw someone hiding behind your back 😂

[@quartzer4008]

Example websites to do for improving css skills

[@debabratasen6955]

gsap

[@fzmdev]

Oh this is gonna be fantastic : Developing a multi admin user application using firebase and angular.

[@WebfulCreations]

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

[@jundi4865]

same lol

[@simplymusical4583]

Gave a me a scare loll

[@beinyourguard]

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

[@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`.

[@t-consult]

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

[@NbaLive4ever]

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

[@banoulka]

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

[@RodrigoMendoza7]

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

[@DesignCourse]

You didn't see that 🤣

[@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!

[@antusaha6823]

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). :)

[@JivanPal]

By default, it only pops up when there was a compilation error, in order to show you the error. You then have to manually close it.

[@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.

[@ademineshat]

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

[@maxkinli]

0:40 OMG i almost die from heart attack xD

[@edwardtofan8783]

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

[@devilreaper8543]

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

[@pax4698]

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!

[@dgeldridge]

Why would one choose to use extends over BEM classes and components? Or are there instances where one is preferable to another? About to do a big refractor and want to start mapping out an approach. Thanks!

[@me_rinta]

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

[@TheElexec]

Hi, SASS'es extend adds the class you extended from to the selectors from the class in which you extended. % extends (Placeholder extends) does the same, but leaves the original class, the one which you extend from, out of the compiled css. Mixins are inlined *every time* you use them into the css. This can make css files lengthy. Their advantage is that you can pass parameters and calculate styles based on them, which you can not do with extends. Conclusion: Use extend whenever you have no arguments. Use %extend whenever you do not want the base class included into your compiled css. Do not use extend when your scss is deeply nested

[@me_rinta]

Munsu Thank you for the descriptive answer!

[@1111kz]

What about the redundancy of this approach after gzip production css?

[@omeralsoma_]

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

[@alinawaz4034]

Don't Hold (ALT + Tab) just Press (ALT + Tab) and leave it will automatically change your window to the old one.

[@NihilismEnjoyer98]

Cool. Am new to sass, correct me if I'm wrong but we could've used a mixin with fixed values to do the same, right? It's just that mixin can be seen as more like a function which was created for using same properties but desired values given as parameters so, they just created another thing to just help us define uniform properties with values across different elements.

[@mrleblanc]

Mixins will repeat the code, extends will create a combined selector. This can be usefull when you share a lot of CSS and don't want to make your stylesheet to heavy

[@NihilismEnjoyer98]

@@mrleblanc Thanks for replying but i still don't understand how will mixin need to repeat it? Isn't it like using include instead of extend... And it will change for all of em once we change mixin.

[@mrleblanc]

Akshay Sharma If your mixin create 10 CSS rule and you use it 100 time, it will create 1000 line of CSS. If you use extend, it will create 11 lines (10 for the rules and one big line for the compounded selector)

[@NihilismEnjoyer98]

@@mrleblanc oh! Thanks for explanation :) i get it now.

[@alexchiu]

neat. ive started trying to write atomic css which seems similar to this.

[@parthkumarchaudhary]

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

[@techtipsuk]

Called a group selector. Better just giving them the same class and using BEM as you taught in your previous lesson.

[@duckmasterflex]

I was always told that using extend was an anti-pattern in sass and to use mixins instead

[@joseflinha]

Mixins and extending is anti-pattern :-D

[@duckmasterflex]

Having your daughter peak into the video added a tun to the enjoyment of the video

[@DaggieBlanqx]

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

[@StefanMetze]

THX for this tutorial 👍🏻

[@iUmerFarooq]

Is that possible that we make *.exe* file of *WebApps*?

[@0xDEAD_Inside]

Electron..?

[@msvmanikantasrivishnu7788]

Nice thumbnail..❤

[@vatsalyasinghi438]

Hi Gary.. as a backend developer , I find it difficult to write UI code .. as in I understand what the tags mean but styling them is all Greek and Latin .. Hope you understand what I am trying to convey.. How do I learn which styling to use and when ? Please help and Thanks !!

[@parthkumarchaudhary]

Wait for some time. Gery is going to launch UI course. Also if you want to learn basics then please check 2020 Crash Course by Gery.

[@Collidedatoms]

Start by learning selectors, background color, and color. That's it. Nothing else. You can even embed the css between a pair of tags in the head. Then learn how to use divs and spans if you don't know already to layout your html. Then learn css grid and flexbox. Then learn fonts. Then learn positioning. Once you know that, it gets easier and the syntax seems really straightforward. Once you understand css, you can learn sass.

[@vatsalyasinghi438]

@@Collidedatoms Thank you ! Will try this 👍😊

[@georgettebeulah4427]

This is so true and make more sense .

[@cmnweb]

Plot twist..your daughter is whispering you the code, jeje greetings from México

[@anand.prasad502]

0:24 who's there

[@cenation319]

.gary{ z-index: 1 } .daughther{ z-index:0 }

[@MikeElmore]

Don't look behind you but there is something there...

[@piyushkaushik7445]

that lady behind gave me creeps. And SASS is just Smart Ass.

[@oraogavran3115]

You literally used extend with only one example dislike!

[@juraev0056]

Hello again :)

[@vintprox]

Tailwind classes with tree-shaking to the rescue! P. S.: Ah, so the child decided to "extend" you :)

[@hamedhatami518]

There's a ghost behind you 😁😁

[@chikkiidehalvi5561]

such a sweet cute ghost :)

[@usaava]

0:43 a supper cute girl behind you

[@TangoIndiaMike144]

and at 0:23 lol

[@Collidedatoms]

She's like creeping up on him. There was a news blooper like that where this lady had like a nutso look on her face creeping up behind the news caster and she saw it in the monitor and broke down laughing and crazy lady lost it too. It was hilarious.

[@MaxWeir]

Weirdo

[@rennesinternet3872]

ouch, i readed ass instead of sass !

[@usaava]

First comment :D

[@sunstrike8943]

I crush on ur daughter 😹😹

[@ErrorDebug]

ur sick.

[@JoseMVelazquez]

wth?

[@MaxWeir]

Freak

[@sunstrike8943]

Just kidding brother