Sass in 100 Seconds

Learn the basics of Sass (SCSS) or syntactically awesome stylesheets. Sass is a language and complier the can make your CSS code more efficient and programmatic fireship.io/tags/css/
#css #webdev #100SecondsOfCode
🔗 Resources
Sass Docs sass-lang.com/documentation
CSS Top 10 Pro Tips • 10 CSS Pro Tips - Code...
Bracket Pair Colorizer marketplace.visualstudio.com/...
🤓 Install the quiz app
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

[@anupjoseph7368]

Its surprising when a language names itself awesome and is actually awesome

[@p.c.principal7324]

C# was developed with the codename 'cool'. That name fits its language

[@dsi-films1264]

Yeah woah haha

[@TheoParis]

@@p.c.principal7324 more like SEE SHARP 😂

[@shashankaryaofficial]

Lit

[@vvp8590]

Awesome window manager

[@Leftnutrightnut]

Started watching a couple months ago and thought you’d run out of ‘100 seconds’ ideas but if you’re still doing Sass then we’ve got a long way to go

[@Fireship]

Still have a long list of ideas

[@denys3211]

I dont think he will ever run out of ideas. New tech comes every day

[@krishgarg2806]

He can just do js frameworks, there are unlimited.

[@theseangle]

@@krishgarg2806 and oh boy... He did, does, and will have to do it forever at this point

[@marusdod3685]

there are more js frameworks than seconds in your life

[@nawabmohdamaan13]

Pikachu hitting another pikachu is pretty much summed up feeling while writing css

[@samuelgunter]

2:17 I think you should be using Bracket Pair Colorizer 2. It's by the same guy and has better performance & more customization.

[@Fireship]

Good call, v2 is the one to use.

[@ben_sch]

@@Fireship pin maybe

[@sweatypotato248]

Thanks bro, that helps

[@ovatlh]

don't forget indent-rainbow too

[@alonsoACR]

@@ovatlh thats a lil too much

[@devsauce]

I find Sass to CSS is in a way what Typescript is to JavaScript.

[@sweatypotato248]

what, well you are not wrong though,

[@nestromae]

lol, no way, it's like babel to JavaScript

[@seanthesheep]

@@nestromae I would say autoprefixer is the Babel for CSS; SCSS is just a superset of CSS, not a new, barely supported version of CSS, like how TS is a superset of JS

[@Soremwar]

Sass actually adds features to CSS, while TypeScript only adds types though

[@danielegvi]

Funny enough, SCSS functions don’t have type declarations, so it is just as “untyped” as vanilla JS.

[@torond6908]

Can't believe it haha :D literally searched "sass fireship" less than 24 hours ago and was surprised there was no video on it!

[@anjelpatel36]

He did it again. Comes up with a video just when we need it.

[@mthaha2735]

Don't lie for attention

[@torond6908]

@@mthaha2735 Right! I looked it up, actually searched for "fireship sass". Sorry for that!!

[@anjelpatel36]

@@mthaha2735 Lol. You must be fun at parties.

[@red13emerald]

If you’re watching this video now, vscode has bracket pair colorization built in! It’s a lot more performant than the extension and respects your color theme! You just have to enable the setting :)

[@GanerRL]

bro bracket pairs is awesome thanks for showing this

[@aarondewindt]

2:17 The Bracket Pair Colorizer is now a build in feature in VS code. So there is no need to use the extension anymore. You just need to activate it in the settings.

[@aarondewindt]

To be clear, the feature was added after the release of this video, I'm just posting an update.

[@kiwihour333]

I never knew Sass was this useful. I swear this channel teaches me something new and useful every week. Keep it up!

[@sandeepsharma9833]

these 'X in 100 or so Seconds ' videos have been very helpful to me. Gets to the point without waste of time. Thank you Mr. Fireship

[@anthonysalamanca4988]

I've never installed a VSCode extension faster. Holy shit, thank you.

[@LinhVu-kc4wg]

I'm madly in love with your 100s series 😍 . Things just seem to be so much easier to understand when you explain it.

[@angelainniss7986]

Been working with sass for a year and just never really understood how the mixins worked or the functions as i used the same ones 🙈🙈 and just brushed it off each time. This video has helped a lot! Thank you!

[@sKevinShelly]

I just recently found your channel and it's been a wonderful while here, especially the 100second series helps a lot.

[@Jonathan_Henderson]

These 100 Second Videos are awesome! Thanks for taking the time to create these for us

[@vinaykotturi1283]

I've been using SASS for a while and it's absolutely a life savior.

[@MarcelDerWeltenbummler]

I feel so dumb for having used plain css for like 3.5 years now

[@amarg26]

It's is so amazing that you learn languages superfast and came up with videos. Just incredible. 👏

[@frak7190]

taking my first css/javascript/html class right now and this channel has never been more helpful

[@alexanderreyes1732]

Thank you. I started developing webpages in Astro as a hobby. I have always been a fan of creating websites. I was part of my middle school web design team back in 2001. A LOT has changed and I've always been fascinated by it. I've been using Tailwinds and regular CSS. This 100 second video def got me up to speed with Sass. Thanks!

[@jdubina6078]

Do styled components next!

[@rpavanshetty]

I love every video of yours. They’re priceless ❤️ Keep them coming

[@xrr-1]

Also, if you hover over a nested selector in vs code it will show an HTML structure so we can check which element gets selected.

[@johnfridja]

God damn wonderful, instant watch every time you release something. Even when I know it already :)

[@kr4bz]

Your pro-tips are like pots of gold at the end of a rainbow, much appreciated!

[@user-cj3yu9nv1u]

Woah, great work once again! I would love to see a video like this on Tailwind CSS as well!

[@jeanpolice3044]

Awesome vids, this channel is one of the best !! Good work and keep adding value to us !! 👊🏿 🔥🔥

[@jeremyscheatday7305]

Yea I’m very happy with this video, I’ve been a long time subscriber, hands down my favorite vid

[@littleoddboy]

If I will be honest, you can't completely learn SCSS or SASS with this video, but it gives you a preview of what you have to learn. And also, for someone like me that knows the SCSS but he/she didn't remember that this video can be like a very small cheat sheet or re-viewing map. Thank you for creating this great stuff.

[@thegoodgolly1465]

came here while trying to decide the best way to do design in my current project, but I wasn't prepared for that perfect extension suggestion. I'm 100% adding that to my work computer's vscode too

[@Abdullah-sy9hx]

Amazing! Only one hour published but KZbin recommend this! I never get recommended that much early video. This is relatable to my learning and also a helpful recommendation! KZbin often recommend me at least 4 yrs older videos!

[@lawryyXD]

love the tip at the end. never knew i needed it, but i just know i'd like it.

[@jeremyscheatday7305]

🥰 been doing this for a while now, learned some very powerful tricks. Thanks!!!!

[@mr2octavio]

That pairing of brackets it's awesome

[@willsprocess]

Thank you so much :) Loved the bite sized content exactly what I was looking for.

[@abhishekmohanty232]

I know sass but still, this video is just awesome and helped me brush my sass knowledge. thanks a lottttttt bro

[@chris_tech_savy]

Wow, so much value in 100 seconds! Well done! :)

[@jimhalpert9803]

I didn't know about the mixin part... Seems very useful.

[@shaikmohammadabdullah1771]

Thanks for sharing Team Fireship. This was really helpful and gave a basic idea.

[@xtraszone]

your 100 s tutorial concepts is super cool

[@mahmoudhassen4463]

Very informative and to the point. Thanks for that!

[@scotchrobbins]

It's fun to watch one of these videos and have it instantly compell you to learn the topic.

[@tobiogunsina8426]

Thanks so much for all of this. You deserve a break for everything you've done for us

[@vicsystems]

He is truly amazing

[@puppergump4117]

Next video: WHY I'M QUTTING KZbin (SERIOUSLY)

[@renu3463]

Superb! Now it's time for some backend... Poll now 👇

[@Fireship]

Have a cool backend video in the works :)

[@renu3463]

@@Fireship 🎉 I thought you will poll but now I have to wait "LESS"...

[@ksato3991]

Thanks for the amazing vid ! Keep up the great work!

[@boredduck231]

wow so much stuff i never knew about sass thanks!!!

[@Iamharshiv]

Your content is awesome👌👌

[@DanielTames]

Thanks for all content! You're awesome

[@RedMoon814]

I looked for tutorials on Sass to see if it was worth to learn, since I already had a fair amount of CSS practice dissmissed it as It just seemed "css without curly braces" but you've opened my eyes, It has so many useful features! The @mixins (and conditionals! yes! finally!) was my favorite feature. Gonna try learning it soon

[@severtone263]

Great summary! Thank you

[@vineboomsoundeffect5395]

It's nice to see the bracket pair colorizer as a built-in feature in vscode

[@AkumtoshiJamir]

thanks for the bracket pair thingy

[@hasancanboga9808]

That looks simple enough. * Adds SASS to CV *

[@Aziz-kw6ct]

Great video! It was very helpful.

[@bafian]

sass is simple and intuitive, this video kinda summarizes all you need to know :D

[@hotagu4187]

Hell yeah! I love this channel

[@moonedCake]

Best Channel To Learn Web Tech🔥🔥🔥

[@Mischiefcity2013]

You should do a video on multi-threading versus multi-processing, versus async

[@ecs1611]

This came in clutch. Tysm!

[@madhavkwatra5888]

superb , learnt alot in just 100 seconds. the presentation of the video is so awesome. Keep it up

[@mohammedmubarak1478]

Teaching style fabulous after seen this everyone try to learn this

[@lucass.p9579]

Wow I didn't know about these built-in functions like "darken" and "lighten"... is super useful. I have used something like that with styled-components and the lib polished.

[@NovaAquarius]

While opening I uttered Sass. And after it loaded the first video was this. What kinda sorcerery is this! 🦄✨

[@beinyourguard]

"Sass has been around for 15 years" Me: huh ever since the nineties? **realizes 15 years ago was 2006** Me: ........oh god

[@MrSamkots]

Feel ya bro!

[@parkuuu]

Out of all the languages you could've spoken, why did you choose to speak facts :( God I feel old

[@maycodes]

fireship rocks. Keep up the good work 🔥

[@cormanec210]

Have used Sass for a while, and it's awesome, but Fireship videos are too good to miss out on even if I've used it before.

[@muhammadumarsotvoldiev8768]

Thank you very much for your efforts!

[@simontrichereau136]

Your work is amazing !!! To add some infos, you can use more function to modify your color (saturate, opacify, transparentize...). Since I know Sass i never cme back to plain CSS, and there's more, the nested elements are so funccionaly and easy to understand and use, I now use less class/id in my HTML code making it quite simple and lightweight. But there are other practices using the BEM paradigm to make your CSS, i think you should dedicate a video on this even if I don't use it !

[@visu7135]

OMG thanks for the last tip! I love VS Code

[@mewokatt]

Loving that outdo animation of freshly logo

[@eneskarakas6864]

what a high quality video! you are just a legend

[@jeremyscheatday7305]

In particular the nesting bit

[@visheshgupta4990]

Thanks it is just amazing 🔥 Thanks for the bonus I am looking for it Thanks alott 🙌

[@MrKostas336]

Thank you! An amazing video again!

[@KristherLouisVidal]

when you are more excited with the Bonus Tip than Sass. Sorry but those Bracket Colorizer is the thing I needed the most right now!

[@samuelgunter]

You should look into installing Bracket Pair Colorizer 2. It's by the same guy and has better performance and more customization options

[@chepossofare]

You can use "rainbow brackets"

[@KristherLouisVidal]

@@samuelgunter already did! thanks

[@zia3712]

The best part of this video was learning about bracket pair colorizer

[@maximcoppieters]

For anyone interested, vscode now has it's own bracket pair colorizer. The extension is no longer maintained.

[@GustavoFernandes0]

just awesome! Thanks for share

[@moonlightCR7]

Jeff and Sass are Awesome. ❤

[@aalveeaarham9351]

The bonus tip is soooo helpful 😀😀

[@iBulowHD]

Awesome video as usual

[@makuabira2116]

Quality content as always 🔥

[@pneujai]

just wanted to learn this and u popped out

[@mohitdas5292]

Syntactically Awesome Video ❤️ I'm gonna use it use it use it in my next project 😃

[@SaharThe49]

Great video! Can you make a video with tips about how to implement web design? What units to use, how to make sure it's somewhat responsive and anything else that you can think of :D

[@Dabayare]

I had sass idea first when I use to struggle with building themes for wordpress :)

[@PandaTheGFX]

I want to see more short videos like this

[@964tractorboy]

Perfect bite-sized summary.

[@fabrimuch]

Bracket Pair Colorizer 2 is legit. I cannot picture writing or reading code without it

[@AlexG-hz1df]

awesome content as always :D

[@BradenJohnYoung]

Never tried Sass before... I think I shall! Thank you

[@codedrian]

What a great explanation

[@matthiasgehrmann1573]

great presentation !

[@jeremyscheatday7305]

Okay, I get the mat-color stuff now. Yo, this is a good video, not sure why this hasn’t really clicked before when I was reading the sass docs.

[@highfructosecornsyrup]

I seriously love Sass, if I'm doing a UI that I anticipate is going to be complicated, or just lots of lines of code I always opt for Sass to carry my workload.

[@jordancotter5885]

Information overload. Never thought I would say that after a 100 second video of a tech I've already used (apparently not as effectively as I could)...

[@sheepy0125]

i didn't know this existed but i need this now

[@adarshsingh87]

You can also enable the indent rainbow extension

[@veenaarchana]

Hitting the like button for every 100 seconds video 💫

[@PiyPowKachou]

I was so hoping for beyond 100s! Great vid nonetheless!