5 Sass features that make it better than vanilla CSS

Get updates on my upcoming Sass course: learnsass.com
A look at nesting, including the parent selector (&), and nesting media queries, as well as mixins, partials, functions, loops, and more.
Other Sass Videos:
- Getting set up with Sass: • Sass with auto-refresh...
- Using @use and @forward: • Stop using @import wit...
- Sass vs SCSS: • sass vs scss - what's ...
- Why I love partials: • Get your stylesheets m...
⌚ Timestamps
00:00 - Introduction
00:44 - Nesting basics
03:33 - Nesting - the parent selector (&)
06:56 - Nesting and media queries
08:34 - Mixins
14:41 - Partials
16:58 - Functions
20:34 - Loops and more
#css #scss #sass
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@cjaym5671]

Hey Kevin, thanks for all of your hard work and sharing! I appreciate it all! Just so everyone knows I'm 46 and started coding 2yrs ago with youtube tutorials. So for the older guys and girls out there it's never to late to learn.

[@RonnieNissan]

And I think I was late at 28, keep it up :-)

[@armansyaharman280]

I'm 26

[@timbittins]

I started using Sass in january and now I'm highly addicted to it. I start sweating if I'm not using it and feel kind of weird and out of place without it. Thanks to my dealer mr. Powell. "They tried to make me go to rehab. But I said p*3>no! "

[@danielluna7648]

One of the best and most functional Sass videos I've ever watched. Clear. Concise. And most importantly, useful.

[@iliankarasimirov9685]

I could not say it better!

[@adamczarny6482]

I like the way, how fast and clearly you are showing it in normal css file and scss

[@TheThirdWorldCitizen]

Been writing vanilla for years without sass. Definitely going to check it out today

[@shreejitpal6598]

I'm sold. You got me at those media query features ❤️... less media queries typing is as good as saving lives 🙏

[@abhishekshukla2745]

Awesome! Your channel is mine of knowledge for frontend developers in any stage of their career.

[@VasilyPavlik]

Brilliant as usual! Even if you know all these quirks separately, watching all these in one video turns your mind to new direction.

[@petarkolev6928]

This has become one of my favorite videos ❤️

[@Anth-ony]

100% one of the best Sass videos out there. Very good information.

[@rockmonty]

So many great tips. I always learn something new when I watch your videos & I've been making websites for many years.

[@primatondyaryakurniawan267]

i'm falling in love with scss, you make me more loving it

[@mdyarafat581]

The css king.... i have never ever seen anyone like you

[@opossum4463]

Kevin, you're legendary as always! I've used sass for a long time and I just learned a lot! Thanks bud!

[@soymuymuy]

Same

[@m0kkechen]

I love this channel. I learn so much new. And so many new cool stuff. I have learned more in the last few days than I did for the last years

[@NicolasRojasA]

Thank you Kevin, nice receipe! It's very savvory and elegant, and I believe it points to it's elements correctly. Once again, thank you, sorry for the delay and compliments to the chef!

[@mirage4731]

Started using SASS and just loved it

[@nielslytzdk]

The CSS King strikes again :) Thanks a lot Kevin, more sass videos please!!!

[@JigneshPosarekar]

Been using sass for about a year now 😅 but this session made me realize that I haven't been using sass to its full potential till date... Learnt alot 🤘 thanks sir

I have been a long time SASS (indented) user and still learn tricks from you, thank you! I loved your making the internet awesome t-shirt so much I bought one and of course I bought the red one ...

[@dzintarsmagons]

I was not paying attention that I was actually using node-sass for the last 6-8 months. I just switched to Dart Sass and it was really easy to transfer thanks to your explanation of how @use and @forward work. Thank you for sharing your wisdom, Kevin.

[@AdarshSingh-qd6mq]

After watching this , I open my laptop and updated flex loop code . Thanks for this knowledge sharing...🙏👍

[@zakhariihusar6975]

Awesome tutorial 🔥

[@scttlnd]

Your calm way of explaining and the examples you give.. damn they are good! All of your videos are very, very helpful!

[@KevinPowell]

Thanks so much!

[@georgesmayrink2305]

Mr. Powell, you rock! 🙏🏽👍🏻

[@blackcatdev]

Thanks for the great video :) Just as you said: many devs like having everything in media queries at the end of the code. But I, just like you, love nesting media queries inside elements. Then when I look at the code of the specific element, I have everything in one place. IMO it's much simpler when I don't have to scroll up and down just to see what will change in that element on particular screen sizes. Actually, there is a quick(er?) way to add opacity to color in VS Code. When you paste hex color (or color name etc.), just hover over it and the color picker will show up. There is a slider that will change opacity and when you use it, the color will change to rgba() automatically. Anyway, functions are cool too.

[@mind_of_a_darkhorse]

Another extremely helpful video! Sass is awesome!

[@KevinPowell]

Yeah, Sass is awesome! Glad you liked the video :)

[@techslugz]

Love the vids not trolling. Just makes me smile every time the emphasis on "IS"

[@paungster]

Thanks for the tutorial. Appreciate it.

Thanks for this excelent explanation

[@mehdianisbrahmi9262]

wow very instructive, I use sass in my projects and I learned so many new things on this video, I wanted to point out a tip that I use all the time but didn't show up on this video, it's about using the nesting with & to derive different states for an element, just like this: .btn { color: blue; &:focus { color: green; } &:hover { color: red; } }

[@fabriziofilograna6498]

Thank you Kevin,nice one!

[@tommallen7073]

This is awesome. Thanks so much!

[@rohil3023]

Super useful!

[@sebastianurbaniec9225]

Very useful video. Thank you!

[@KevinPowell]

Thanks!

[@reneessurf]

Awesome video! very informative, as always :)

[@KevinPowell]

Glad you liked the video 😃

[@philippemarquis2727]

Right to the point! Thanks, I just suscribed!

[@TuanNguyen-te5jx]

I cant believe that you make that content for free.

[@muhammadissasabbagh1540]

omg! unbelievable tutorial, thanx a lot

[@KevinPowell]

Thanks, glad you enjoyed it :D

[@Ghostie1]

Sass is awesome. Nesting just cleans things up so neatly, same with partials. Modular code made possible. Brilliant video, Kev!

[@KevinPowell]

Glad you liked it!

[@gilvanmuniz4142]

very good, thank you so much!!!

[@gobideveloper111]

Amazing content all of in one video. But needs more on sass in practical projects kevin sir.

[@Lulu-xx5sn]

That grid is actually sick, i didnt even think to do that.

[@KrasenSlavov]

A good tip to help you find nested elements is to use comments e.g. &--title { //.card--title }, it is a bit more work but I don't have any problems finding stuff in large Sass files complex structures with many files and directories.

[@quickfix7279]

Kev is just awesome

[@mikeliu6751]

Hi Kevin, could you make a video to share about how you work with css class names(using BEM or other naming convention) & any tips / practices can share? Thanks a lot!

[@martunjaykumar752]

thanks❤

[@anubis9139]

Not sure if you knew this or not, but with hex codes, you can just add an extra 2 characters to the end to change the alpha. #ab4c4a80 == rgba(#ab4c4a, .5)

[@nguyen-van-quang]

Great ❤️

[@unleashthedog]

Now that you mention the searchability, I can see where it comes the suggestion of doing the 7 folders

[@g-shubham]

Thanks sir! Can't imagin what is in full sass course.

[@brianleighton8211]

It's a little more clunky to write but if you include an if else you can make the media query mixin accept custom values aswell as the map variables.

[@victorney]

Hey Kevin, kudos to you for all that you share with us, I'm a backend dev, but I want to learn frontend too, for my first try, I gonna build a CV using html css and javascript, and there is something that I want to ask you, CSS could be used to format print version of the page?

[@vegito8502]

As a programmer sass is so welcoming.

[@peoplearecool8766]

Hey Kevin, can you please make video about your personal website, how did you built it, what technologies you use and what was some challenging parts of building it, I think it will be very interesting.

[@mihailodukic601]

BEM and Sass is a good combo

[@mathiasmendoza5864]

Nice video, it take me a lot of time to learn about SASS, but worth it. Whatever, wich theme are you using?

[@michalnowak2181]

thx

[@NOPE96]

Funny, if you look at the rgba conversion feature, the vscode plugin shows that the colors actually mismatch, comparing the color previews with each other.

[@andreysyroyezhkin2591]

Hey thanks for the informative video. Toward the end, I wasn't sure why one would try to build a grid with Flexbox instead of CSS Grid? Seems like you're doing a lot of work to make that grid happen, compared to what I've seen is possible with grid-area, etc.. Speaking of, I was wondering how SASS and CSS Grid work together?

[@ministryofanti-feminism1493]

Kev, do you happen to have a SASS vs Bootstrap video for CSS rookies such as myself? I'm not sure which to invest my time in!

[@pedromartindelcampogonzale9613]

Hi! Great video as always. What do you think about CSS in JS? I'm not much into it but I feel like I may be missing something interesting, Has someone used it in real-world projects? How useful is it? :D

[@tilakmadichettitheappdeveloper]

Hey Kevin ! I love all this SCSS stuff but can I use it in styled-components React JS ?? How to make it work ? I use styled-components in nearly all my projects so I end up writing raw css ...

[@Lokus122]

Great content. What is the advantage of custom property over sass variable?

[@KevinPowell]

Custom properties can have defaults/fallbacks in a way that Sass variables can't because of how Sass has to be processed, whereas the browser can read custom props and figure it out on the fly, plus JS + Custom props = 😍

[@skillzorskillsson8228]

You can use Alpha Channel with Hex Colors too

[@KevinPowell]

Oh, I should have included that, I love that sooo much!

[@skygrace8459]

magnifique

[@AbhinavKulshreshtha]

I never used post-processor ( does tailwind count ? ) But I like when you said we can use post-processing to combine all @media for processing. Can you do a topic on having a postprocess optimization in workflow. Maybe a short video in your "tips & tricks playlist" for getting us started, and also adding a detailed chapter in your renewed Sass 2021 series. Every time I see a notification from your channel, I am hoping for that series.

[@KevinPowell]

If you're using Tailwind, hopefully you're using PurgeCSS along with it? That's a post-processor. It's built into their process with the purge command, but if you're doing that, you've gone one under your belt already! :D I will be looking at more workflow stuff down the road :D

[@AbhinavKulshreshtha]

@@KevinPowell I only went through tailwind playlist from the net ninja. I did tweak some office work but I was provided cheat-sheet.

[@julienconnault1612]

In which partial folder/file would you put your last example?

[@b1mind]

[@KevinPowell]

If someone told me Sass was going to be gone tomorrow, but I could port one feature over to vanilla CSS, it would be that.

[@nkdeus]

SASS can save your life :)

[@Technoph1le]

Hi, @Kevin! I have a question about maps in Sass. What is the difference between quoted and unquoted keys in maps? I mean, $colors: ( primary: #06f; ); And, $colors: ( "primary": #06f; );

[@festusiyere]

Beautify

[@simonrajter]

14:07 what if I write some key, that doesn't exist in the map? will it throw an error?

[@puskaradhikari3185]

❤❤❤

[@lukmansk6853]

hey ,kevin have you made any video about responsive images ,if not can you please make some

[@KevinPowell]

I have a whole series on it! kzbin.info/aero/PL4-IK0AVhVjPKGIBWg7YYmlBkFIiy_9r1

[@lukmansk6853]

@@KevinPowell Thanks for the help and your videos are awesome.keep uploading

[@lazymacs2823]

Do you have a tutorial in postCSS about removing duplicate media query declarations?

[@KevinPowell]

I don't, but it's in the pipeline... or well, the list of things that will end up in the pipeline :D

[@crooker2]

Is there a Dart Sass watcher for vscode?

[@sanjibchanda21]

Sir, css variables or scss variables which is easy to use and customize in sass. Please help

[@thesouthband]

This is a great expository video, as usual. One problem I constantly run into (am running into currently) with SASS is an overly elaborate organizational structure and sloppy curation of the parts. It really defeats the power of SASS to be efficient. I'm also baffled by some folks using endless utilities to solve problems that never existed. I can't find the point of writing "converts(16, px, rem)" instead of writing "1rem" for projects that can't define the need.

[@KevinPowell]

Oh, yeah, there are over-engineered solutions out there for sure.

[@dionisii93]

how do you get css vars and sass color functions to play together nicely? Last time i've checked they don't.

[@KevinPowell]

You can't, since CSS variables are never rendered. Sass functions need an actual value, and a CSS variable, by nature, never is set in stone.

[@dionisii93]

@@KevinPowell so what do i do if i want to use sass color values with vars? Badoo guys, iirc, solved it by writing their own functions

[@alex_chugaev]

Now I'm a senior sass developer 😅

[@kuznetsovs]

Добрый день! Существует ли плагин для vs code, который группирует все медиа запросы и помещает их в конец css? Hello! Is there a plug-in for vs code that groups all media requests and puts them at the end of the css?

[@svoloSlovakia]

Hi, what is that feature at 16:18 where you have --font-weight:100; --font-weight-star:100 etc. I am asking because "--xy-z" notation is usually used with CSS variables and I don't see any "var()" used and also I am not familiar with this being part of Sass. Thnks

[@KevinPowell]

Those are CSS custom props, I'm just declaring those locally on the element instead of on the root 😊

[@abdulrafay7448]

Can anyone link me a vid or explain how to get the live display changing as you code ur html/css

[@Danachew]

There's a VS Code plugin/extension called Live Server. Check it out, it's awesome.

[@DigitalMonsters]

anyone using the grid thing going forward, the / for division is being deprecated (sass-lang.com/documentation/breaking-changes/slash-div) Now you use math.div(); @use "sass:math"; @for $i from 1 through 12 { .col-#{$i} { flex: 0 0 math.div(100%, math.div(12, $i)) } }

[@PavelIsp]

I've never needed to use sass to be honest because the amount of css I write is very little , but holy god dang, nesting media queries, giving it another try...

[@KevinPowell]

Nesting media queries is a life-changer, lol

[@tasmto]

🤯

[@pawekoaczynski4505]

I'm wondering if SCSS is Turing Complete. I tried to Bing it, but I only get results like "is *CSS* Turing Complete"

[@ed1nh0]

One thing I always like when I worked with LESS is that I could nest child classes for PARENT elements, like .bar { .foo& { ... } } OUTPUT: .foo.bar { ... } I can't do that with SASS unless using a selector-unify.

[@KevinPowell]

You can nest, but yeah, that example you can't pull off... you could do .foo &, and get a nested selector, but you can't do it like you showed.

[@pxdav]

16th!!

[@0oopssorry]

[@kalahari8295]

😐❤️🔥

[@XD-te6vj]

what's wrong with bootstrap?

[@peoplearecool8766]

One thing I don't get about media queries and mixins is that, in final step you get code like this : @include mq(medium){ color: black}, but in order to get it work you needed to write bunch of code at the top how is that better than just writing @media (max-width: 400px){...} ?

[@KevinPowell]

When you say a bunch of code at the top, you mean the mixin that I created? I haven't written that in so long now, I make the mixin once and just bring it project to project :)

[@peoplearecool8766]

@@KevinPowell Thank you for replay, Yes I mean the mixin. But I steel don't get it way it is better then just writing normal media queries, I guess I need more time to writing scss to understand it better.

[@elijah4840]

Is it just me or does his voice sound like Kyle from Web Dev Simplified?

[@martinheywang4962]

If you like this kind of Sass with so much "reflectivity", you'll surely like Javascript because Sass looks more and more like a programming language...

[@migueldomingos4570]

He already knows javascript...

[@ryannorooz]

And I've thought I knew all about Sass...

[@techslugz]

Hi my name IS Kevin lol :-)

[@somewhereinhawaii3663]

I see bloat. You'd rarely use all .col sizes in a project. Edit: ok, you mention post processor to clean up media queries. Is there a post processor to remove all the unused CSS? If so, then I stand corrected on my previous statement.

[@JasonJA88]

SASS looks like more work... you type less code but the visualization between SASS and vanilla CSS are the same.

[@P8860]

You get looked down as a developer if you don't use it. At least it was for me when I did web development.

[@JonathanLoganClark]

I agree. Regular CSS has the :is() selector to replace nesting. CSS variables to replace SCSS variables.