Learn Sass In 20 Minutes | Sass Crash Course

Рет қаралды 926,084

Күн бұрын

Check out my courses here!
developedbyed.com
In this mini crash course we are going to learn everything about Sass.
What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.
With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!
We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.
If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
📕 Things covered in this video:
- How to add sass compiler to our project
- How to link our sass to html
- Sass variables
- Mixins
- Nesting
- Extending
- Operators
- Partials and Imports
📔 Materials used in this video:
VSCode
🛴 Follow me on:
Twitter: / deved94
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b...

Пікірлер: 1 400

@haciendadad 3 жыл бұрын

What a nice guy! He is constantly smiling, makes me smile with him but I am not sure why I am smiling, but I don't care. Happy guy!

@marakeshg8112 3 жыл бұрын

He's the only person that ever made me feel "gorgeous"!

@mandarinnu 3 жыл бұрын

I wanted to write the same thing! :D

@elenaustyuzhanina297 3 жыл бұрын

We all tend to smile when see someone smiling because of inborn mirroring mechanism)

@aryankhandelwal15 3 жыл бұрын

😀

@sabertoothwallaby2937 3 жыл бұрын

smiling doesn't mean you're nice.

@munch6814 5 жыл бұрын

Me every second: wow!! I wish I had you as a teacher irl

@ahmadluayeleiwy3411 4 жыл бұрын

just like how I reacted.

@zakariaaulin 4 жыл бұрын

He is just awesome!!

@supreetkumar7604 4 жыл бұрын

hes always smiling :)

@izmir175 4 жыл бұрын

HAHAHAHA I wanted to write the same thing! :D

@yongpinbong441 3 жыл бұрын

Cause most teachers go by the book, not from their experience. It's great that we have youtube, where experienced developers can share the skills they've accumulated over the years with us.

@amenovv 4 жыл бұрын

01:02 Sass Live Compiler install to VsCode 01:42 Create scss(sass) file 02:43 Vendor prefixes 03:24 Variables 06:27 Nesting 07:56 Complex nesting 08:55 Separating code into multiple files 11:15 Mixins 13:50 Mixins with custom parametres 15:52 Getting 50% blindness 16:04 Getting 100% blindness 16:37 Extensions 18:17 Calculations 18:47 Conclusion

@gabyc4356 3 жыл бұрын

Very thoughtfull of you. Thanks! Also the blind thing, very funny. :)

@somefishhere 3 жыл бұрын

Haha great names

@muhsin8507 3 жыл бұрын

Bro why he use use underscode when separate different files

@akaruianims 3 жыл бұрын

thank you

@ramoun16 2 жыл бұрын

@@muhsin8507 so that those partial files don't get compiled to css

@RocckeFella 3 жыл бұрын

love they way you smile and teach

@adebayowixda32 2 жыл бұрын

I subscribed when I saw this comment

@joshuagraham6731 5 жыл бұрын

For no reason, I've been holding back to learning sass. This is my first attempt and I loved it. Thanks so much! You're good

@sahanpd 5 жыл бұрын

Bruhh Same!!

@sharank 4 жыл бұрын

Wow. I thought it's only me being lazy. There are many fellow developers in this comment section

@batiksyndicate9683 4 жыл бұрын

Dude, same. I was like "Nahh, next time. I'm comfortable with this original CSS syntax rn"

@hiryuimajin 4 жыл бұрын

Same dude! I was like, I think it'll make my life a lot more complicated and this just made it freaking simple.

@rizkiaprita 4 жыл бұрын

same,

@mi5956 5 жыл бұрын

in 19 minute I learned more than past 6 months. thank you please upload more videos like this

@mav3ricktv 3 жыл бұрын

really? :/

@user-og9nl5mt1b 3 жыл бұрын

Well that's on you for being a lazy bum

@vanshsehgal9475 2 жыл бұрын

For real?

@suhaaskorampally 2 жыл бұрын

Yeah I would love more videos like this

@thefreemonk6938 10 күн бұрын

Dive more deep into mixins, you can give default values to parameters and call only that specific parameter by its name when doing @mixin

@victorsaisse1340 2 жыл бұрын

I never learned so many good things in such a short time! Great content, awesome! Thanks

@alexandrtcacenco8129 Жыл бұрын

When I first read your commen I was sarcastic, but then I watched the video. I can't believe I waited 2 years to start using sass.

@faisalchishti2798 3 жыл бұрын

Been doing CSS for years and every time I got close to learning/implementing SASS, got scared with the syntax looking at the docs and ran away, but this tutorial finally made me love the cool thing. Thanks a bunch!!!

@developedbyed 5 жыл бұрын

Crash course on Javascript ES6? hmmm....

@andsheterliak 5 жыл бұрын

Yes, it would be great :)

@user-fs1ux7dy6r 5 жыл бұрын

fantastic idea

@amarbugarin6393 5 жыл бұрын

Aslo please show us how to install it on pc to use it

@MuhammadIrfan297 5 жыл бұрын

We are waiting for it :)

@RockstahRolln 5 жыл бұрын

Get to it!! :D

@WebDevSimplified 5 жыл бұрын

Nice video! I am always impressed (jealous) with how quickly you can create such high quality tutorials

@developedbyed 5 жыл бұрын

you make me blush

@WebDevSimplified 5 жыл бұрын

@Handmakerz HM thanks. I am in the process of recording a big node.js tutorial which will hopefully cover a lot of those topics. I also have a video on both promises and async/await if you haven't already checked those out. Lastly, I would love to collab again with Ed, so hopefully in the future we can make it work.

@tubenzr 4 жыл бұрын

I cant believe two of my mentor talk each other... 😂🤣🤣🤣

@justin9494 Жыл бұрын

bruh

@madelinebrewer5682 Жыл бұрын

When you demonstrated the $direction and column custom parameters, my jaw literally dropped. So cool, and so useful! This SASS tutorial totally levels up my CSS skills. Great content!

@plusk343 3 жыл бұрын

CSS: Helloooo Sass: Hellooooo CSS: *Alright imma head out*

@alejandromartin8347 4 жыл бұрын

When you are having fun making a tutorial it makes the viewer have fun too. Very nice.

@kingsley15 4 жыл бұрын

Wow, just wow - all this time I've been overlooking Sass, not knowing it brought this much functionality to CSS... I'm always starting new Angular projects, and every time it asks for my styling choice, I always chose standard CSS. Well I got curious today and I'm glad I did. See, this is why I hate getting too comfortable with one thing. Thanks pal, your video was perfect. [Edit] - I actually can't believe it's this easy!

@fine-vine 4 жыл бұрын

I love watching your courses ! You always smile. It's enjoyable. Everything seems cool.

@Guonejo 2 жыл бұрын

I learned more from you in 20 minutes than from my teacher in the last 4 months. Thank you so much for this! Keep smiling!

@paulv20 5 жыл бұрын

I love your enthusiasm, joy, and excitement that you put into your videos teaching us these crash courses! You're doing gods work teaching us new things!

@jen1951 5 жыл бұрын

I'm only half-way through this tutorial so far and I've already 'liked' & subscribed! Love your energy and teaching style - casually delivered yet well-structured and super easy to follow along. Well done! 👍

@kiwicami287 4 жыл бұрын

I agree there's a lot of tutorials around youtube made by various persons but something about here is just super easy to follow and it even has a bit of humor thrown in, love it. Traversy Media tutorial/crash courses are also good

@danneytee 2 жыл бұрын

the fact that it took me so long to learn HTML, CSS, js, react.. it gave me the idea of sass will take a long time to learn as well. glad I found this video

@amalanilkumar1851 3 жыл бұрын

20 mins flies by without a single sec of lag. Subscribed. One of the best teacher out here.

@aaronbell5994 4 жыл бұрын

Every time I need to relearn Sass, I come back to this video. Thank you :)

@SasageTheUndead 2 жыл бұрын

You had to learn sass multiple times in 1 year?

@RockstahRolln 5 жыл бұрын

Fantastic video! I've learned a lot in 20 mins, many thanks!!

@oscardiaz9170 4 жыл бұрын

I love the way you teach, you look so happy, it makes me feel a little better automatically

@ricktar15 2 жыл бұрын

Great video. I have been avoiding sass but after seeing this, I am ready. I really like how you touched on so much of it's powers through simple uses, like when you accepted parameters to a mixin for different colors and flex direction. Absolutely loved this

@NikhilBhat 4 жыл бұрын

This is fantastic!!! I learned so much so fast and I've already started converting my application from CSS to SCSS. Thank you so much :) You're a great teacher

@lookintomyeyes2681 5 жыл бұрын

your excitement makes wanna check it out from the start !!... thanks a lot for the video dude....🔥🔥🔥🔥🔥🔥

@Dylson 2 жыл бұрын

Thank you Ed! What a video, still watching in 2022! You continue to carry the enthusiasm in web development!

@frontendsimply9006 3 жыл бұрын

he made it looks so easy and fun and he is constantly smiling omg we need poeple like you

@keels952 4 жыл бұрын

Amazing tutorial as always Ed! I feel like I've just absorbed everything you've just gone through so efficiently and quickly. Thank you.

@HollyElms 5 жыл бұрын

"Hit enter on this big boy" I subscribed immediately

@hosampb5593 4 жыл бұрын

My first video for dev ed Efficient, not too fast not too slow. No unneeded info. Thanks dude

@amarkarthik6566 2 жыл бұрын

3yr old video, but still the best tutorial ever... I was always getting back whenever I tried to learn SASS, now this guy made me understand about it in less than 20mins. Awesome. ✨✋....

@Ren-xv8xo 4 жыл бұрын

>I'm going blind. That made me laugh so hard. Great content as always.

@khandaeejan 4 жыл бұрын

Based on my 20 minutes experience with this guy. conclusion is that it would be really fun to hangout with this guy. oh and nice tutorial too m8.

@no2475 4 жыл бұрын

I learned about Sass long ago and needed a good but not too lengthy video to refresh my memory of it. This was absolutely perfect and exactly what I was looking for, thank you.

@nerodant85 Жыл бұрын

This man is one of the nicest people on KZfaq. Thank you for all the great content, you are amazing dude.

@Tanya-yu6mf 4 жыл бұрын

16:06 oh no, my eyes. Why you did that to us

@developedbyed 4 жыл бұрын

It had to be done 🤣

@Tanya-yu6mf 4 жыл бұрын

@@developedbyed 🤣

@filipfarag676 3 жыл бұрын

Looks like Joe Rogan's new studio

@john_smith281 4 жыл бұрын

Next: classes and objects in sass :D very good video!

@mrsandman6188 4 жыл бұрын

Never been more and more mindblown throughout a video in my whole life! Every time you showed something new I felt like my head was about to explode! Thank you, senpai!!

@TheDJproduktions 3 жыл бұрын

What a great video. Sass used to seem a bit complex to me, but the way you explain it makes it seem super simple and really useful. Well done!

@demian5511 5 жыл бұрын

Good content! Very clear!

@arifali1063 4 жыл бұрын

I will never do normal css again

@waybackstudio5866 Жыл бұрын

Love the way he smiles and add some little humor to it... this is unique!! Thanks btw

@hiSunho 3 жыл бұрын

Not only this video super helpful, but aslo this guy seems more excited and enjoy what he teaches :) Great energy, thanks

@michaelkolawole2311 4 жыл бұрын

i'm just wondering why did 36 people dislike this video? This is one of the best tutorials on KZfaq!!

@muffinmatt4723 4 жыл бұрын

People thought they were gonna learn how to be sassy in 20 minutes

@luisfelipereyesdionicio4799 5 жыл бұрын

your a great man!!!! your videos are awesome!!! thanks bro for you time and dedication

@developedbyed 5 жыл бұрын

you guys are really awesome so I will be 100% dedicated to bring you more!

@LearnEnglishWise 2 жыл бұрын

All the sass you need to get started in 1 neat and concise video! Loved it Ed! Take care man

@mirjana72003 4 жыл бұрын

This was indeed the most important stuff to learn about sass without going into crazy detail that make my head spin! Thank you so much, great job!

@andreiairinei1659 3 жыл бұрын

"As you can see, i'm going blind..." - laughed my ass off =)

@pushpakgupta7396 5 жыл бұрын

you are happy, i am happy...you are smiling,i am smiling...great enthusiasm

@dextermorgan7764 5 жыл бұрын

we are all gay! :)

@chewingwildflower 2 жыл бұрын

i've always wondered what sass is but never searched about it until now. Thank you so much! This completely changes the game hnnngggg

@sairarashid5800 2 жыл бұрын

you are my new favourite person on youtube. thank you for all the work you put into these videos. We appreciate it :)

@maniek9910 4 жыл бұрын

My life won't be the same anymore :O

@emilywagner6858 5 жыл бұрын

I prefer SASS instead of SCSS because you can eliminate the open and close curly braces. Also, JADE is another thing that would be useful for HTML markup. Using JADE along with SASS makes things so much easier.

@lukaspl12 5 жыл бұрын

but he is using here SASS and still has a curly brackets. So why is he using them?

@emilywagner6858 5 жыл бұрын

@@lukaspl12 SCSS uses the braces, SASS doesnt.

@vishalsuryawanshi8408 4 жыл бұрын

I just like his smile at every point , there are really less teacher like that, keep it up man.

@zancrow_gaming Жыл бұрын

Best crash course of my life. I wanted to needed to learn this to hone my skills as a developer. Now I know everything basic to build a great with SCSS now. Didnt even need to watch an 30min or an hour vid. Saved my time used Tailwind but now am beginning to fall in love with this SCSS. it is so freaking clean super awesome.

@mr_matata 5 жыл бұрын

I think ill get too spoiled, so I'm staying with simple CSS for now & great crash course video man .. you cleared all the questions in my head regarding what sass is

@JuanCastro-C 4 жыл бұрын

Thank you, I think I will no longer will use regular css again

@anand.prasad502 3 жыл бұрын

css also have variables

@generationwolves 3 жыл бұрын

What about inheritance and mixin? Those seem like really useful features to make someone use SASS over vanilla CSS.

@techslugz 3 жыл бұрын

Oooooo the nesting selectors is f-ing AMAZING!

@chizobaegbujie1484 4 жыл бұрын

This guy is GOOD,there is this excitement that comes with learning from him.He spices up his teachings with funny acts,facial expressions and jokes that make me learn faster. SASS all the way! Thank you plenty good teacher

@SandeepSaini-tr9sv 4 жыл бұрын

Hey, Can you tell me VS code theme name used in this video??💥💥

@siegfred14 2 жыл бұрын

This is the best crash course I have experienced. 29 mins and wow!

@amit-shirasao 4 жыл бұрын

Superb job bro! Nice job! This is the first video that I saw on SCSS and it has sky-rocketed my confidence. Thx :)

@tarunsharma2102 2 жыл бұрын

Nice guy, giving positive vibes all the time by just having a smile on his face.

@MM-jr5sr Жыл бұрын

Man, you have just opened my eyes...! Sass is the thing!! Thank you very much for this. Love it! Keep up the good work, just subbed.

@jaiceevlogs1260 3 жыл бұрын

This is such concise and straight to the point tutorial which I have been looking for for a long time! Great video on Sass!

@violentblush960 2 жыл бұрын

you are such a good dude ! amazing content for explaining sass. I have been wandering around for weeks and nothing is as clear and good like your explanations and your content. I used to really like Traversy Media , and learned stuff from his youtube channel but hey you are my new favorite! thank you so much for all your hard work ! Much appreciated!

@exilius333 2 жыл бұрын

Excellent. Explained simply, concise, to the point with no unnecessary fluff !

@toshifollow 4 ай бұрын

The simplest and most useful tutorial I've seen so far. This video helped me understand Sass, thank you!!✨

@siebedegelas Жыл бұрын

how wholesome can a video tutorial be, and well explained. thanks

@julianjose5089 4 жыл бұрын

absolute fantastic...you not waste a single second looking this!

@danielkakai2877 3 жыл бұрын

I've always ignored sass but now I love it, great tool

@shayama 3 жыл бұрын

I never used sass and now I am like woooow! This is sooo coool!

@tanjaburke3813 3 жыл бұрын

You are legit my favorite webdev course guy! Amazing! I've never used Sass before, but I'll rewrite the CSS on my webpage ASAP. I had no clue it was this powerful and easy.

@user-oh5vo5rj6y 3 жыл бұрын

That was awesome. Now I definitely got it. Thank you. Sass, here I come!

@sanghvian 4 жыл бұрын

You're an amazingly cool teacher Ed. 1 min into the vid and I'm already luaghing at the Title you chose

@patrickpierre-devtips 2 жыл бұрын

Great video on the basics of Sass! You made it really easy to move from basic CSS to the most important features of Sass.

@hchc4138 4 жыл бұрын

Hello Ed, just wanted to say i really love your videos and your way of teaching. it is really easy to understand. i hope you will keep uploading more videos just like this. i have been struggling to improve my beginner level front end web development for 3-4 years now. Your content really helps me. Thank you!

@cas5948 3 жыл бұрын

Wow man, didn't expect this video to be so good. Your learning style definitely activates my brain and I love your passion. Keep it up!

@ionutmatei7646 3 жыл бұрын

I've just never really looked into sass, even though i hear the word often. Your video just makes sass so attractive and easy to use. Thanks Ed, really loved the way you explained stuff.

@angel-pu7su 2 жыл бұрын

You are one of my favourite tutors here. You are such a happy fellow and your tutorials are easy to understand. Thank you very much.

@jawadmalik6104 3 жыл бұрын

Please continue doing Crash Courses. You take 20 minutes to explain something that other people take hours to. Keep up the good work!

@alokalakruwan 2 жыл бұрын

Dev Ed Contents are the Collest Toutorials I ever watched....

@umiamira3332 Жыл бұрын

Thank you! I'm new about SASS and really LOVE it already!

@vivianeb90 3 жыл бұрын

I love your cheery attitude, that made this even nicer to learn!

@crazy-boy6143 3 жыл бұрын

Well, just wanna say thanks since the video is helpful. The best thing about it is that you just went straight to the point and showed us the things that make sass special

@anaraberda4677 5 ай бұрын

I love that you are so friendly and happy. Positive person with lovely smile. Subscribed!

@gerardosorto9373 4 жыл бұрын

Thank you very much, Ed, for this quick introduction to Sass. You definitely deserve my like and sharing!

@minadief 4 жыл бұрын

best teacher ever, you explain everything in a simple way, and your smile is making a difference ! thank you!!!

@ngantukASMR 2 жыл бұрын

love your energy bro, this video was so clear and useful! thank you

@samueligwe3858 2 жыл бұрын

I always understand better when it’s dev Ed. Thankyou dev

@fierce10 Жыл бұрын

I loved this one, I saw very long tutorials and forgot everything, but this one recapped it all quickly in a meaningful way

@Buster475 Жыл бұрын

This is the best tutorial I had seen for Sass. Clear, concise and enjoyable!

@MauriceLacerda0 4 жыл бұрын

WOW! I didn't know Sass until now and I'm super excited to start using it! First thing I thought of when you introduced mixins was "can we set a default value for an argument?!" And SHABANG!!! Yes, we can!! LOVED IT!!!

@deepeshjha6463 4 жыл бұрын

Subscribed and chose all notifications... So nice way to keep the viewer attentive. A good teacher u are.

@andreadiotallevi5780 4 жыл бұрын

Great video! Exactly what I needed, thank you! Can't believe I have been writing css the old way searching for the same to colours to change.

@Reachforsalvation 3 жыл бұрын

You make learning,super exciting. Danke!!

@boris-mikhailgeorgiev9547 2 жыл бұрын

this man is so wholesome, I love it!

@techstudent754 4 жыл бұрын

i don't know how this video is so great!!! you taught so much in 20mins , thank you bro

@seanastro5549 3 жыл бұрын

A perfect video on Sass. Sold. Before it was just some mystery tech that other people kept annoying me by having in their projects. Thanks for explaining most of the key benefits.. finally.