Learn Sass in this Free Crash Course - Give your CSS Superpowers!

Today's Question: What other learning resources outside of this channel do you learn from?
skl.sh/designc... - First 200 get their first 2 months free @ Skillshare!
-- While Sass has been out for quite some time, I wanted to create my own resource for my viewers to learn. Sass enables you to write CSS with features that don't yet exist within CSS itself. In this free crash course, I'm going to show you how to get up and running with Sass while creating a simple responsive landing page from scratch.
We're going to cover:
1. Integrating Sass within Visual Studio Code
2. Sass Variables
3. Sass Maps
4. Nesting
5. Mixins
6. Functions
7. Sass & Media Queries
Github repo for this course:
github.com/des...
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS weekly!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Smash that Subscribe Button! - My answer for today's question: I learn the same way most people learn: Google. Based on the results, I may end up on a KZbin video, or I may end up at a Udemy course. For full comprehensive topics, I'll check out Pluralsight, Skillshare, Lynda, etc..

[@michereff16]

Mostly Udemy and some times on KZbin.

[@minusgod]

Treehouse , Udemy & KZbin

[@81NARY]

PluralSight, Official Docs, KZbin, Stack Overflow & Books...

[@matexxo4004]

Udemy, freeCodeCamp, DevDocs(MDN), KZbin, random articles

[@rosaclovis]

Udemy and courses like this one here as exercise. Hope you make another one like part 2, part 3 of it. All the best bro!

[@mikaela__]

not gonna lie, i’m in awe at how well and how much you can explain in under an hour, i’m a complete beginner (as in, literally doing a front end bootcamp as we speak) and even i could perfectly follow this tutorial

[@sougataghar1179]

Soon you will get an internship too .I mean I got an internship just within 2 months of html css js ... I think internship will teach you even more

[@mphokhotleng6280]

I'm learning how to code during quarantine and i'm so glad to have found your channel! you're such a great instructor I can't get enough of your videos. such great quality! thank you so much for all the time you've devoted to teaching us

[@mudyeet_]

Coursera University of Michigan(A certificate course but I mostly go for the ones I'll be mentioning forth), Web Dev Simplified, Kevin Powell(Pardon me If I spelled his last name wrong), FireShip, Dev Ed(His videos normally are overview, the primary reason why I decided to watch your SASS tutorial over his). It's my first time watching your video, maybe second. But I really loved the hands-on follow-through approach, and I realised how much I underestimated SASS. Thank You! You earned a sub :D

[@jani14jani]

This is easily the best Sass crash course i've seen. Subscribed!

[@psyberpirate]

I love this channel, besides this source, I also learn from Udemy, Andrei's Zero To Mastery Web Dev course. Amazing content from both of you! Keep it up. Thank you.

[@AppleHeinz]

exact same combo. :) I guess I'm a year behind you though.

[@xrishi20]

Traversy Media, Dev Ed, Web Dev Simplified, Kevin Powell, The Net Ninja, The Nerdy Dev, Wes Bos, Online Tutorials, Dark Code.

[@charbelmedia3014]

40:44 Him landing exactly at 840px made my OCD very happy

[@udhayakumarmani3283]

This is the first tutorial I am watching about SASS, I have learned a lot very thank you...

[@omarshishani5899]

I enjoyed this tutorial alot, and it was very clear and helpful for learning Sass quickly. Thanks for being to the point!

[@karldtrumpeter]

I learn from Traversy Media, Kevin Powell, You, Mosh, Netninja, Edureka, FreeCodeCamp, Udemy, Coursera, among others.

[@sodkolandiawita4417]

Very clear and affordable - fantastic!

[@marcindomanski5654]

I prefer to use variables $color-primary, $color-secondary etc, because in goog editor (webstorm, phpstorm etc) when you start typing $col... editor is show list of all variables beginning with $col. This is not working with map and mixin. Ah. Your style will work only for very small project. In medium-large project you can't style by tag name (for example main - 41:53). You must add a class. Otherwise good stuff. As usual.

[@albertoazinar1209]

I really learned amazing stuff in this lesson. Great content

[@kevinzhang8974]

I am heavily using udemy.com for learning ... so far it has all the stuff I need .... even drawing lession class for my 6yr daughter ...

[@lag9803]

Udemy - traversy media - el zero ( Arabic source ) and Dev Ed

[@Skaxarrat]

Traversy Media, Net Ninja and Academin for FrontEnd stuff The DumbFounds, Just Django, Telusko, Tech With Tim, Justin Michael for BackEnd (Mainly Django/Python) Plus Udemy courses and ebooks.

[@fernandogomez83]

Really well-explained video. Thanks.

[@tshady1067]

Thank you so so much bro. You deserve more subscribers than this

[@howiewang4238]

Thank you for this tutorial. A little bit confusion: // why do we need #{$desktop} below? @mixin desktop { @media (min-width: #{$desktop}) { @content; } } // as I understand, #{$name} is for combining strings. but here i don't see any point of using it // I tested below code and it works fine. @mixin desktop { @media (min-width: $desktop) { @content; } } please help.

[@hamidrezaashkiyan]

It was AWESOOOOME!! I Loved it.

[@dying3353]

Amazing video, this was so educational and fun to watch.

[@TheMoralescl]

This video is awesome. Thanks a lot.

[@love4photos]

Awesome efficient, well explained video! Thank yoooooou!

[@sharmilas22]

So useful, Thanks!

[@priyankamistry539]

hey gary.. awesome video as always. will you please make a video for how do you structure your all sass files for a project?

[@lazarveselinovic7037]

Awesome Teacher!

[@rockmonty]

A very well explained tutorial. Thanks

[@sumitpatil7084]

Thanks a Lot Awesome Video For Begineers

[@manansinghal2586]

Clever Programmer, Dev Ed, Web dev simplified, Thapa Technical, firebase

[@chawkichalladia1812]

mainly traversy media, this channel, mindacad and few others on yt also Google and stackoverflow and any technology documentation

[@muhammadsafiullah8428]

39:35 what the heck was that 😁😁 I loved your reaction ❤️

[@VenkatarajanGovindarajan]

Fantastic Demo, thanks...

[@morigene]

Udemy. My learning resource. Your video is great.

[@claude.detchambila]

Quality content, I love it

[@levan8207]

Sorry, may I ask a question? Why "span" would only work with "position: absolute"? Thank you!

[@sougataghar1179]

I might be wrong but i think its because of the nature of display of span ... Like span default behaviour is display inline i believe

[@danbuild977]

This is the link to Visual Studio to follow along with this tutorial exactly: visualstudio.microsoft.com/ You can use your own IDE but I like to personally follow along as he does it. Thank for the tutorial Gary!

[@mustaphaELHOURA]

awesome, thanks

[@nikolabosnjak9991]

great course thanks bruh

[@davidhernandez1699]

Xcellent! Thanks!

[@mgjulesdev]

Quality content!

[@BorisRiddler]

You're the best! :)

[@anythingfx8950]

Great tutorial, ive learn a lot! I have a questiong though: when you use margin-left: max () function, could you explain how it works? On google it says max and min doesnt exist for margin, and i could not find anything on the matter in any websites like MDN, CSS-TRICKS nor W3S :(

[@chaddhaji1407]

CRUSHING ICE CUBES 😇😁 18:34

[@lukefox836]

video starts at 2:00

[@ReALiTy47100]

What keyboard are you using?

[@thomasmelak]

that moment when you see Gary's shirt is transparent on the logo.

[@bookwormhead]

+DesignCourse . Any idea why the polycon is not full height on mobile? I though there's something wrong with my code but when I copy your report. The issue is still the same..

[@vamsikrishna4960]

Java brains...one of the best tutorial channel, check it out if you haven't.

[@inamrasluzd6578]

Traversy Media, Webslesson, Codecourse, Lynda.com

[@rexinferi]

Hmm... the mixin query is not working when applied to elements inside an inline svg, it works but very glitchy, not sure why?

[@akramaskar4446]

Dope shirt!

[@nelsonjimenez7939]

Hey bro, help me out. Microsoft Studio Code stopped compiling my .scss file I'm following along. Thank you!

[@muhamadabdulsamad2815]

I guess we could make it easier with using bootsrap4 , isn't it?🤔

[@rajucool2009]

Awesome

[@sveinsoermo9883]

Traversy Media, Angular Firebase,, Firebase, Kevin Powell, Academind, Layout Land sort of in that order.

[@seandoherty5340]

Man, thankyou for the Layout Land tip. The beauty of KZbin - I came looking for Sass and found Jen Simmons 😂

[@kandysman86]

@@seandoherty5340 layout land is awesome.

[@balz.k3483]

Colt Steele?

[@keyos27]

Netninja

[@digigoliath]

@@seandoherty5340 Jen Simmons, she is a superhero

[@tkdevlop]

Make a video about how to become senior web-developer in 48 hours please ;).

[@alial-jabur6453]

TUSHAR just say you don’t “code” anymore lmaoo

[@qwss23]

Damn! It takes relatively years to go form junior to senior, but 48 hours....Good luck with that my man!

[@maheshdev5877]

TUSHAR Senior Web developer with in 48 hours?? If you are coming mars it's possible. Seniority comes with work, effort, experience etc

[@DesignCourse]

He was making a joke based on another joke I made on a Traversy video.

[@dontcomply3976]

Move to a black hole.

[@jessicaerasmus7428]

Self-learning through KZbin and Udemy. And lots and lots of Google.

[@riteshmaharjan9535]

Can you teach me how you do the self learning, I have been trying myself watching tutorial and when i try to do something on my own i fail miserably :/

[@bayusetyawan3086]

@@riteshmaharjan9535 for my own self-learner. Just ignore the theory in the first time and following what the videos do. Then if you did it, try to make by your own, if you still missing the step open the video. If you already achieved tutorial that you have been watched, then make your own theory which your own comprehension for me it took 1- 2 months to master HMTL and Css (Because I got a bit basic of Design Graphic). If that take too long for you, Just forget it. Every great web developer always had hard time when they want to make what they want. for the simple one I always ask my brain to say "How" and "Why". Then I keep looking the source of my problem. if you like theory so much, I recommended w3schools.com will help for you. Actually I don't like theory btw. But I really want to master it so bad I decide make my own comprehension after looking and practice it video on youtube. Do it now, theory later

[@fredsmith9962]

@@bayusetyawan3086 good advice

[@arjunchokkamaman1945]

"Sass is CSS on steroids" this is the best and most accurate description of Sass I've heard xD

[@elissitdesign]

Arjun MC - No wonder it makes me rage.

[@marcoscarlomagno3065]

"Typescript is javascript on steroids", actually thats the origininal

[@ssygon2]

26:03 I thought you should remove "text-decoration: none" , since you already have "text-decoration: uppercase". But I think it should be "text-transform: uppercase" and then leave "text-decoration: none". Which you went back to change in 34:13 😊 Cool tutorial 👍

[@mudyeet_]

Lol I actually only saw him write "uppercase" in the value, and wrote "text-transform: uppercase" in my follow-through code lol, didn't realise he actually made a mistake there.

[@TheEphemeris]

This is the first I've watched with this KZbinr, and also the first real step I've taken to learn CSS, SASS and HTML and this video is the absolute best at learning! It's simple enough that someone like me with almost zero coding experience can follow along. It's engaging, I never feel bored and feel like skipping ahead. From beginning to end this is EXACTLY what I've been looking for in a tutorial for beginners like me. I'm so excited that I made it to the end, and have a "webpage" to brag about! Can't wait to see what possibilities I can come up with tinkering around with this information... Thank you!!

[@musaddiqali1]

I have a confusion on what's done at 29:07, the span element has position: absolute, but I read in w3schools that: *An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).* *However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.* As we can see that the nearest parent of span element i.e., list-item(li) isn't a positioned element itself. Then why does it still works fine? I thought that the list-item has to be positioned, doesn't it?

[@thecodingowl]

If you learnt SASS, wanna know how to implement it in your project. Learn the build process: kzbin.info/www/bejne/haS5aJ6qiq6Eh6M

[@LumbreraEnMiCamino]

what software do you use for edit yours videos? =) sorry for my noob question !

[@christofffrazier4225]

I already use SCSS on a daily basis but I gained insight to things that I apparently was ignorant about in it full ability. Thanks for the great presentation!

[@lansingcai9155]

Best SASS tutorial ever. Super straight-forward, easy to follow.

[@LukeMcCormick-cellear]

That was amazing. I've watched huge numbers (hundreds?) of online tutorials, but that was probably the best I've ever seen. I went from 0 to feeling like a master in just over an hour! (I had to pause the video a few times to catch up :) Thank you!

[@anthonypenna476]

Traversy media mostly x) And nice video Gary, as always

[@nellison]

I use Brad Travery's channel Traversy Media, Your exclusice channel DesignCourse, DevED that guy's awesome,

[@aymanmakhoukhi3591]

these three youtubers are my favorite

[@giovannaramos3239]

Im watching in 2x and i thought he said ''so you're about to begin a crash course in Sass from a very beginner perspective, so im going to assume you never tocuched ass before"

[@gargameo4560]

Great course, learned a lot today. That clip-path is a new to me. Awesome. Thanks a lot :) Answer for your question: KZbin, mainly Udemy, took nanodegree Udacity (great one), went on Plurasite before, but that one is good while you have subscription, Udemy is better because when you buy something you have it for good. Medium is good for quick stuff along with MDN and w3schools.com, and when I get really stuck than StackOverflow saves the day.

[@fullvolume1642]

Isn't it misleading ! On 6:45 you said "We can't actually use variables in CSS, native CSS without using a pre compiler", is it really true ? Could you please explain why variables couldn't be used in CSS without compiler. For your kind information developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

[@chavazdesign9517]

Hey thanks for this lovely discovery, i'm using your color function, there is a way to use color(name); like this? $colors: ( primary: #22AA2F, link-hover: color(primary) )

[@JamesWelbes]

I don't understand how scss works. Does the server/apache translate the scss into the css file automatically? Or is that something that needs to be set up? is the map file necessary? Is this something you can only do with node.js or something? The syntax looks easy but I'm struggling with how to actually implement this into a website

[@orenwolfe6506]

I'm a bit confused... The title says 'Learn SASS...', the narration says 'SASS', but the code you write is SCSS. Which is it, dude?

[@augustinekirumba4304]

- Press Shift, Alt and down arrow key - Change this to Dark - Change this one to Darken... by 40% Results: Its gonna look almost the same as it did before

[@kamal-ahmed]

Thanks for this amazing course. I am learning a lot. :) btw, a small typo was there in the video. maybe it will help someone. so I am mentioning. at 26:36, the last text-decoration: uppercase is not valid CSS rule. maybe you meant text-transform: uppercase :) by the way, thanks again for this useful course. Edit: it is fixed at 34:30 :)

[@vutEwa]

thanks for the video. Question about variables. you have $colors defined with primary having a color and primary-light and primary-dark re-specify the same color in the math. Could not a variable be used more efficiently such that no repeats of the color definition would need to exist anywhere except in the variable?

[@thedacian123]

Hi,I didn't understand how mix works.Do they have parameters,why did you use string intepolation in mixin instead of barelly passing the deskop param. Thanks!

[@dayronalfaro9461]

Oh man your VT always are owesome THXXXX i dont know why are 93 people that dont like it. Forgive English LOL

[@EM-sl1mw]

I may be late to this, I have a pattern or jpg, png file that i want to use a as a background; I have yet to find a code that supports this. I want to use a .png file as a background I am at a lose. please help; I am an experience novice just new to css. the concept sounds familiar but when i think I know CSS or SCSS it gives me nothing but a white background.

[@frankgregory6845]

Gary, I know I'm late to the game here, but what is the main advantage to using the map-get vs just a straight variable? Seems like there's more typing to use the map-get and no real benefit. Or did I miss something? Thx . great video!

[@richardlighthouse5328]

Google, KZbin and StackExchange. C#/C++ programmer. First language was C#.

[@michelrail]

Udemy, Kevin Powell, Academind, Web Dev Simplefied and, of course, Design Course

[@rehanjamali5829]

Sir Kindly tell me, which application you are using to Mock up your site in this website?? plz tell me application name... that i could get it to download it... plz reply fast as possible

[@MillennialGI]

Thank you very much for the video. I recently started coding and you are helping me out a lot!

[@umangghinaiya8073]

Nice I Love it Thankyou

[@NotHalfBadNomad]

Can someone please help me? I’m so lost.. I’m trying so hard to learn this and I can’t make it past the first 6 minutes…. What’s up with all the different files he’s creating? I can’t even get started because I don’t know what to do. I have created an html file in vs code. To write scss I need to have a separate css and scss file? How do I link them all? Help!

[@felvinperez957]

Now its the time when a programmer became a designer..

[@8koi139]

What a mood

[@abdull264]

You're a genius, Bro! I have learned a lot from this video about Sass. Thank you so much! May God Bless You Always!

[@asandax6]

A little tip about fonts when watchitng tuturials and for production use Google fonts so the need for the user to have the font installed will be eliminated. You just select the font familes you want and once your done copy paste the in your html and the font will be immediately available.

[@hardikmodi8234]

No words to say about your content. Amazing material is the very very small word to describe your content and your efforts. Thanks for putting so much efforts to help us out.

[@francislambert5189]

The only video that got it right for me. Wow. really, it was tough for hours trying other videos. Thank you. Peace : )

[@Tsxtasy1]

Great information, but a little verbose on the intro. It feels like the first 8 minutes could have been 2 minutes, really glad I stayed with it!

[@happynight6533]

10:40 (if it works like js) you was actually able to make it {} not () and then do $colors.primary !

[@superescapes474]

Bro, Please add video of Brower support too.... like how can we quickly fix the isses in different browser

[@nishpatha5847]

for the media queries couldnt you have one media query and put the grid template areas without those media queries....I am new to programming so sry if I get this worng

[@gangalatharva]

in 2021, CSS custom variables are supported by 95.15% browsers.

[@michelironside6160]

hey, why does clip-path cut off the img or box? and what is the solution to this problem?

[@tharaks552]

:) :) :) so funny when you said live scss gender blah blah it's really funny and good work