Sass in 100 Seconds

Подписаться 3,1 млн

Просмотров 494 тыс.

50% 1

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

Наука

Опубликовано:

17 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 519

@anupjoseph7368 3 года назад

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

@p.c.principal7324 3 года назад

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

@dsi-films1264 3 года назад

Yeah woah haha

@TheoParis 3 года назад

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

@shashankaryaofficial 3 года назад

Lit

@vvp8590 3 года назад

Awesome window manager

@Leftnutrightnut 3 года назад

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 3 года назад

Still have a long list of ideas

@denys3211 3 года назад

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

@krishgarg2806 2 года назад

He can just do js frameworks, there are unlimited.

@theseangle 2 года назад

@@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 3 года назад

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

@samuelgunter 3 года назад

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 3 года назад

Good call, v2 is the one to use.

@ben_sch 3 года назад

@@Fireship pin maybe

@sweatypotato248 3 года назад

Thanks bro, that helps

@ovatlh 3 года назад

don't forget indent-rainbow too

@alonsoACR 3 года назад

@@ovatlh thats a lil too much

@torond6908 3 года назад

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 3 года назад

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

@mthaha2735 3 года назад

Don't lie for attention

@torond6908 3 года назад

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

@anjelpatel36 3 года назад

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

@devsauce 3 года назад

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

@sweatypotato248 3 года назад

what, well you are not wrong though,

@nestromae 3 года назад

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

@seanthesheep 3 года назад

@@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 3 года назад

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

@danielegvi 3 года назад

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

@GanerRL 3 года назад

bro bracket pairs is awesome thanks for showing this

@aarondewindt 2 года назад

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 2 года назад

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

@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

@kiwihour333 3 года назад

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

@red13emerald 2 года назад

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

@anthonysalamanca4988 3 года назад

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

@LinhVu-kc4wg 2 года назад

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

@angelainniss7986 2 года назад

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 3 года назад

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

@amarg26 3 года назад

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

@Jonathan_Henderson 3 года назад

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

@alexanderreyes1732 11 месяцев назад

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!

@frak7190 Год назад

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

@kr4bz 3 года назад

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

@rpavanshetty 3 года назад

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

@vinaykotturi1283 3 года назад

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

@MarcelDerWeltenbummler 2 года назад

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

@user-cj3yu9nv1u 3 года назад

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

@johnfridja 3 года назад

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

@littleoddboy 11 месяцев назад

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.

@Abdullah-sy9hx 3 года назад

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

@jeanpolice3044 3 года назад

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

@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

@jeremyscheatday7305 3 года назад

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

@xrr-1 3 года назад

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.

@lawryyXD 3 года назад

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

@abhishekmohanty232 3 года назад

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

@willsprocess Год назад

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

@jeremyscheatday7305 3 года назад

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

@chris_tech_savy 3 года назад

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

@xtraszone 3 года назад

your 100 s tutorial concepts is super cool

@Iamharshiv 3 года назад

Your content is awesome👌👌

@jdubina6078 3 года назад

Do styled components next!

@shaikmohammadabdullah1771 Год назад

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

@mr2octavio 3 года назад

That pairing of brackets it's awesome

@NovaAquarius 3 года назад

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

@boredduck231 3 года назад

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

@ksato3991 3 года назад

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

@beinyourguard 3 года назад

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

@MrSamkots 2 года назад

Feel ya bro!

@parkuuu 2 года назад

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

@bafian 3 года назад

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

@mahmoudhassen4463 3 года назад

Very informative and to the point. Thanks for that!

@eneskarakas6864 2 года назад

what a high quality video! you are just a legend

@DanielTames 3 года назад

Thanks for all content! You're awesome

@scotchrobbins 3 года назад

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

@maycodes 3 года назад

fireship rocks. Keep up the good work 🔥

@jimhalpert9803 3 года назад

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

@ecs1611 3 года назад

This came in clutch. Tysm!

@madhavkwatra5888 2 года назад

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

@renu3463 3 года назад

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

@Fireship 3 года назад

Have a cool backend video in the works :)

@renu3463 3 года назад

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

@simontrichereau136 3 года назад

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 !

@mewokatt 3 года назад

Loving that outdo animation of freshly logo

@cormanec210 3 года назад

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.

@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

@lucass.p9579 3 года назад

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.

@visu7135 3 года назад

OMG thanks for the last tip! I love VS Code

@Mischiefcity2013 3 года назад

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

@vineboomsoundeffect5395 2 года назад

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

@hasancanboga9808 3 года назад

That looks simple enough. * Adds SASS to CV *

@jeremyscheatday7305 3 года назад

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.

@MrKostas336 3 года назад

Thank you! An amazing video again!

@mohammedmubarak1478 3 года назад

Teaching style fabulous after seen this everyone try to learn this

@pneujai 3 года назад

just wanted to learn this and u popped out

@severtone263 5 месяцев назад

Great summary! Thank you

@moonedCake 3 года назад

Best Channel To Learn Web Tech🔥🔥🔥

@SaharThe49 3 года назад

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

@AkumtoshiJamir 3 года назад

thanks for the bracket pair thingy

@mohitdas5292 3 года назад

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

@Aziz-kw6ct 7 месяцев назад

Great video! It was very helpful.

@jordancotter5885 2 года назад

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

@makuabira2116 3 года назад

Quality content as always 🔥

@BradenJohnYoung 3 года назад

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

@hotagu4187 3 года назад

Hell yeah! I love this channel

@tobiogunsina8426 3 года назад

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

@vicsystems 3 года назад

He is truly amazing

@puppergump4117 2 года назад

Next video: WHY I'M QUTTING RU-vid (SERIOUSLY)

@Suprem0o0radical 3 года назад

Terraform in 100 seconds :) These videos are amazing!

@muhammadumarsotvoldiev8768 6 месяцев назад

Thank you very much for your efforts!

@visheshgupta4990 Год назад

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

@zia3712 2 года назад

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

@Dabayare 3 года назад

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

@sherib5752 3 года назад

I’m not even a web developer (I use C/++) but for some reason I still watch your videos.

@iBulowHD 3 года назад

Awesome video as usual

@sheepy0125 3 года назад

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

@moonlightCR7 Год назад

Jeff and Sass are Awesome. ❤

@PiyPowKachou 3 года назад

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

@aalveeaarham9351 3 года назад

The bonus tip is soooo helpful 😀😀

@PandaTheGFX 3 года назад

I want to see more short videos like this

@GustavoFernandes0 Год назад

just awesome! Thanks for share

@AlexG-hz1df 3 года назад

awesome content as always :D

@highfructosecornsyrup 3 года назад

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.