SASS Tutorial (build your own CSS library) #18 - Using @extend

Hey gang, in this SASS tutorial you'll learn how to use the @extend rule.

🐱‍👤 Get the full SASS course now on Net Ninja Pro:

🐱‍👤 Get access to all other premium courses on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 HTML & CSS Crash Course:

🐱‍💻 Modern JavaScript Course:

🐱‍💻 CSS Flexbox Course (on YouTube):

-------------- Net Ninja Links:

🐱‍💻 My Social Links:

🐱‍👤 Get access premium courses on Net Ninja Pro:

[mrFighter]

I must say your, JavaScript course is bible for learning JavaScript. Best course and best teacher overall!

[MrVisheshsingh]

🌟The best Sass playlist on YouTube 🌟
Thank you so much!

[arshiagholami]

hey just wanted to say, thanks for the great content you provided. The content is sorted logically which makes the course 10x better IMO. I really enjoyed the series.

[chiptaylor]

To extend the navbar text color to be automatically set based on the background-color set you could add a new function like so -
@function text-clr($color) {
@if (lightness($color) > 50) {
@return #000;
} @else {
@return #fff;
}
}

then just use the new function in your navbar loop -

@each $key, $val in $colors {
.navbar-#{$key} {
@extend .navbar;
background-color: $val;
color: text-clr($val);
}
}

[omarciano]

Shaun, I'm currently taking your JavaScript course but getting stuck on webpack. Could you please make a series on how to setup webpack for making websites including css processing, babel, copying assets and loading other files please?

[gepetavrakis]

at the end of the video the last @each why you did not put it in the previous rule and use &-#{$key} instead?

[thewiscokid]

Never knew about the place holder. Nice job. I am hoping for a MEVN stack on your Udemy course.