Sass Crash Course

Sdílet
Vložit
  • čas přidán 27. 02. 2020
  • In this video we will talk about what Sass is and look at its features as well as create a landing page header to display things like variables, nesting, mixins, etc
    Code:
    codepen.io/bradtraversy/pen/E...
    💖 Become a Patron: Show support & get perks!
    / traversymedia
    Website & Udemy Course Links:
    www.traversymedia.com
    Follow Traversy Media:
    / traversymedia
    / traversymedia
    / traversymedia
  • Věda a technologie

Komentáře • 510

  • @TraversyMedia
    @TraversyMedia  Před 4 lety +326

    I realized I never created an official Sass crash course. So here it is :) The slides end around 8:43 if slides bore you

    • @haris7090
      @haris7090 Před 4 lety +11

      Exactly what i'm looking for..Right time.. your are great Brad...TYSM...Today i've enrolled 20 js project course in Udemy..Tysm for all of your valuable educational contents...

    • @ead5590
      @ead5590 Před 4 lety +1

      Was surprised for some reason that I'd received a notification denoting Traversy media has uploaded a SASS course.. Left me scratching my head thinking.. Didn't he upload a crash course on SASS before? None the less, this is certainly welcome to an enormous array of crash courses by you Brad..
      Thanks for everything that you do.. ✌🏻

    • @tolmind
      @tolmind Před 4 lety

      Brad. You are so great. I always use your video to fine tune my skills. Coming from a medical background. I have learnt a lot from your channel.

    • @SkyFly19853
      @SkyFly19853 Před 4 lety

      Thank you very much for this tutorial!
      💯💯💯💯💯

    • @TraversyMedia
      @TraversyMedia  Před 4 lety +3

      @@haris7090 No problem...thanks for checking the course out

  • @DennisIvy
    @DennisIvy Před 4 lety +240

    Everybody loves Brad! Excited to check this out man :)

  • @viniciuslima9434
    @viniciuslima9434 Před 3 lety +105

    For further reference:
    00:51 - Intro
    2:13 - .scss vs .sass
    3:11 - Variables
    4:02 - Nesting
    4:34 - Modules
    5:39 - Mixins & Functions
    6:46 - Inheritance
    7:33 - Operators
    7:55 - Conditionals
    10:40 - Creating a .scss file
    12:30 - Compile .scss to css with npm
    14:40 - Compile .scss to css with vs code extension (live sass compiler)
    25:10 - Modular scss (multiple scss files)

  • @jayasudhaganesh2085
    @jayasudhaganesh2085 Před 2 lety +93

    I got interested in web development after watching your videos, Brad.
    Now i landed my full time job as a front end developer after making a career transition.
    Thanks and kudos for making the contents crisp and to the point.

    • @kamatz4156
      @kamatz4156 Před 2 lety +6

      I've been having a hard time finding a company bro. What advice do you have?

    • @kamatz4156
      @kamatz4156 Před 2 lety +20

      I got a job😁

    • @jusyF
      @jusyF Před 2 lety +1

      @@kamatz4156 🙂👍my congratulations

    • @jogodev3684
      @jogodev3684 Před 2 lety +2

      You got a job by his tutorials only?

    • @Morquioo
      @Morquioo Před 2 lety +1

      @@kamatz4156 congrats man!!!!

  • @francomacias8904
    @francomacias8904 Před 4 lety +5

    You must tired of people telling you how awesome you are but I can't stay silent anymore, You're Awesome!!!

  • @Mustafa-pe5mp
    @Mustafa-pe5mp Před 4 lety +79

    advice: change 'compressed' to 'expanded' so you can see regular css and it will be much clearer to understand

    • @codecast8713
      @codecast8713 Před 3 lety +1

      I was looking for this comment and it's the first one I read.

    • @foxysamu
      @foxysamu Před 3 lety +1

      thank you

    • @themoroccanpianist8953
      @themoroccanpianist8953 Před 3 lety

      but which one is practical and used by most developers ?

    • @Mustafa-pe5mp
      @Mustafa-pe5mp Před 3 lety +3

      @@themoroccanpianist8953 idk but it is better to follow the way that is easier for you now and worry about this kind of stuff later on

    • @themoroccanpianist8953
      @themoroccanpianist8953 Před 3 lety

      ​@@Mustafa-pe5mp I have an issue with live sass compiler , so I uninstalled it and installed compile hero pro instead ! and it is working like a charm

  • @BTSPeach1469
    @BTSPeach1469 Před 2 lety +2

    this tutorial is so amazing! i've been using the very basic features of sass (variables, and nesting) for a few months as i'm new to web dev but this just helped me level up my skills tremendously. thank you!

  • @ayberkyigit4795
    @ayberkyigit4795 Před 4 lety +79

    are you actually reading my mind? I've just finished sass documentation and you uploaded this crash course
    nice!

    • @codeaperture
      @codeaperture Před 4 lety

      Send me the docs please Ive always wanted a deep dive to sass.Link to content you used?

    • @cooljohnny9402
      @cooljohnny9402 Před 4 lety

      me too lol. Brad sees everything haha

    • @adnanaz4526
      @adnanaz4526 Před 4 lety

      So true..

  • @goldenpunk9k
    @goldenpunk9k Před 3 lety +9

    2:17 two formats of sass files.. scss preferred
    2:18 Variables
    4:07 Nesting
    4:34 Modules
    5:40 Mixins and functions
    6:54 Inheritance
    7:35 Operators
    8:00 conditionals

  • @lightingstrike7285
    @lightingstrike7285 Před 4 lety +3

    Hey Brad, I am really thankful for all of your videos. You're a great programmer. Thank you for sharing your knowledge with others. I hope you keep on helping the programming industry.

  • @lucaszanek6204
    @lucaszanek6204 Před 4 lety +6

    It's funny, every time I want to learn something I go to youtube and you just upload a course about it. Monday I start a new job so I was about to learn sass and you just uploaded it. Thanks a lot, you're the best!

  • @waqaskhandev
    @waqaskhandev Před rokem +2

    Your Crash Courses are amazing. I have watched most of them a to z and it really help me alot.

  • @helenag9915
    @helenag9915 Před 4 lety +1

    There are many Sass tutorials on CZcams, but yours is the best. Like always!

  • @dumbignorantfool2353
    @dumbignorantfool2353 Před měsícem

    Thanks! I watched lots of videos about sass and yours are easy to understand with little to no errors which I encountered while following other sass tutorial. Cheers!

  • @MCA96
    @MCA96 Před 4 lety +4

    I learnt a lot from you and keep learning. Thanks for all these top quality content, Brad.

  • @sethmccullough6206
    @sethmccullough6206 Před 4 lety

    Beautifully done video Brad, you made it so easy to get up and running with Sass which I'm loving. Thank you!!!

  • @SuperSarhanWebdev
    @SuperSarhanWebdev Před 3 lety +2

    this was just an amazing video, the way you did those spacing utility classes awesome man love it

  • @iahonz
    @iahonz Před 4 lety +8

    I just watched your responsive portfolio website series and realized "Oh, looks like I've been doing Sass wrong" *me, goes to Brad's CZcams to see that he uploaded a course on this 6 days ago*. Awesome!

  • @marcelino-dev
    @marcelino-dev Před 4 lety +1

    I've previously watched a crash course about Sass on another channel and it was nothing compared to this. Thank you Brad for all your work!

  • @subham-raj
    @subham-raj Před 4 lety +46

    If you go *SCSS* you never go _CSS_

  • @techhype6065
    @techhype6065 Před 4 lety +1

    Thank you very much Brad. You are my favorite teacher. I love every contents you created. I have wrote bad scss codes on my vue.js job but now I learned many useful technique from you. :)

  • @Pavfixers
    @Pavfixers Před 3 lety +1

    first ever css html video i stumble on was Brad . Im very picky for voice and Brad has perfect voice and the way he explains and Happy new year Brand and to your family thanks for what you do

  • @goncalodumas
    @goncalodumas Před 4 lety +2

    Thanks for a great presentation! I’ve used css since the end of the browser wars and it’s great to see how it’s evolved.

  • @orangecode1902
    @orangecode1902 Před 4 lety

    That's why we love you you upload every video when we actually need These

  • @RyanFurrerGaming
    @RyanFurrerGaming Před 4 lety +3

    This was an amazing resource to getting started in Sass.
    Thank you so much!

  • @pavelsantelises9553
    @pavelsantelises9553 Před 3 lety

    Omg dude, you're like the best teacher I ever had. Thank you so much.

  • @grantwilliams9838
    @grantwilliams9838 Před 2 lety

    Again, another awesome vid Brad. Very comprehensive with a great and simple example to learn off. Thanks a mil

  • @bonguthandokhumalo7552
    @bonguthandokhumalo7552 Před 2 měsíci

    Your videos are always informative and clear, you're really a great teacher. Thank you so much for sharing your knowledge.

  • @elilumilay9405
    @elilumilay9405 Před 4 lety +1

    And this is the things i've been searching right now!! Thank you so much Brad! You are great and awesome :)

  • @adarshchakraborty
    @adarshchakraborty Před 2 lety

    Everything in one video. Exactly What was I looking for! That too from my favourite channel on CZcams. 🤩

  • @Algebrodadio
    @Algebrodadio Před 4 lety

    This is the one piece of web development that has, never seemed hard, but I've never bothered to learn it. Now that you've made a vid, I'm happy to watch it. Thanks Brad.

  • @federicocipriani7399
    @federicocipriani7399 Před 3 lety +5

    Thanks Brad! And this is how after 1 hour I have a good knowledge of Sass 😁

  • @user-tf2oi3ef1w
    @user-tf2oi3ef1w Před 4 lety

    Congratulations on 1 million subscribers, you deserved it. Great tutorial as ussual

  • @gabornagy6274
    @gabornagy6274 Před 4 lety

    Congrats for the 1 million subscriber! You are our hero!

  • @deaconuadrian6554
    @deaconuadrian6554 Před 4 lety +2

    Great video, Brad!
    Thank you for the video and all the hard work.
    God bless.

  • @andrewbutton8294
    @andrewbutton8294 Před 4 lety

    I have been looking into using SASS in some of my projects. This is a great place to start. Thank you !!

  • @_dinesh
    @_dinesh Před 4 lety

    You're such an inspiration. I really look up to you. Thanks for yet another awesome video. 🎉

  • @arindamchowdhury16
    @arindamchowdhury16 Před 4 lety

    Thanks Brad for all the knowledge you've been sharing with us... You changed my career

  • @nervanis
    @nervanis Před 4 lety +4

    The utility loop @40min is amazing! I'm working on an image utility library and this is the key to making this code more concise.

    • @alwin5995
      @alwin5995 Před 3 lety

      I thought I could make a theme changer with this prop using JS, but Sass doesnt repond to JS changes, so I dont see the point of using it.

  • @TomkinsOkello
    @TomkinsOkello Před 4 lety +3

    Brad, just a thank you. Great as always...from one of your students 🙏🏾

  • @colindante5164
    @colindante5164 Před rokem

    Once again you demonstrate why most consider you the best out there for web content.. Thankyou much and greatly appreciated. ))

  • @programmingjobesch7291
    @programmingjobesch7291 Před 11 měsíci +1

    33:00- Just opened up a whole world for me

  • @badytouray294
    @badytouray294 Před rokem

    Loved this video 🙂 Your style of teaching is amazing with basic easy to use/understand examples :-) Love your 1hour crash courses.. Thank you for being yourself

  • @atmanvisual190
    @atmanvisual190 Před 3 lety

    Your big picture crash courses are such a great resource. Thanks a lot!

  • @bacanalienigena
    @bacanalienigena Před 3 lety

    Thank you for the whole learning about Sass, you helped me also to understand flex box better. Cheers and Happy Christmas!

  • @soflogator
    @soflogator Před 3 lety

    Wow Sass is really going to take things to the next level for me. There's so much that I can learn and do with it. Excited to see how I can implement this with my larger projects. Thanks for the great introduction and explanation to it!

  • @ImranKhan-ft7ns
    @ImranKhan-ft7ns Před rokem

    These crash courses are life saving... Thanks Brad ❤

  • @hiuheu6653
    @hiuheu6653 Před 4 lety +1

    Brad thanks for this, I am really enjoying your recent videos. I have a degree in Civil Engineering but I fell in love with programming and have been teaching myself for the last 7ish months. I am starting to make websites for my local businesses here in London. I have picked up view and react so far, I am really starting to love Gatsby for doing freelance projects.
    Anyways thanks for your videos, they serve as a nice refresher.

  • @aniketchaudhari5062
    @aniketchaudhari5062 Před 4 lety +3

    I was about to look for SASS video and here it is! 👍

  • @lourenxoweb6348
    @lourenxoweb6348 Před 4 lety +1

    I love your content so much and I always wanted to see a Sass crash course from you!

  • @erfanm1206
    @erfanm1206 Před 2 lety

    your crash courses are my first choice for learning stuff
    Thanks Man

  • @cynthiamanor6565
    @cynthiamanor6565 Před 4 lety

    Thanks so much for posting this. I'm having to learn about CSS pre-processors for a class, and this REALLY helped!

  • @gxguy2906
    @gxguy2906 Před 4 lety +1

    Finally I been searching your channel for this. Thanks

  • @yonahbb4635
    @yonahbb4635 Před rokem

    great vid, loved how simple and easy it was to understand throughout!

  • @29rohitkumar01
    @29rohitkumar01 Před 3 lety

    Thanks for this amazing course.
    Will try to implement some of these in one of my existing project.

  • @Dablus
    @Dablus Před 4 lety +2

    i swear to god i was just looking for a sass course, and here you are !

  • @CharlesDeBarros
    @CharlesDeBarros Před 3 lety

    As always, your content is just priceless. Shame I can only give one thumbs-up! Keep the oustanding content coming! Much appreciated indeed!

  • @kamatz4156
    @kamatz4156 Před 2 lety

    Really enjoyed learning this!. Thank you for the video.

  • @mistersz
    @mistersz Před 3 lety

    you are my favorite programming guru.
    Glad to see Sass course in your channel !
    Thanks

  • @iamaakashbasnet
    @iamaakashbasnet Před 4 lety +1

    I also learned SASS from your Udemy course. Loved to see more in-depth video on it. 😍

  • @julieoelker1865
    @julieoelker1865 Před 2 lety

    After I finished Brad's Udemy course on Javascript, I took this course. So glad I did. It was easy to understand the functions and mixins after learning Javascript.

  • @nivellen1168
    @nivellen1168 Před 3 lety

    I'm very glad you made a video to Sass. Thanks Brad for the video!

  • @TechTravelbyRJ
    @TechTravelbyRJ Před 3 lety

    Same stuff i watched from another youtuber and those thing goes above my head , your presentation is awesome ❤️

  • @nilmendes7710
    @nilmendes7710 Před 3 lety

    As always, very rich and fun content.
    Helped me a lot!
    Thanks!

  • @tzwacdastag8223
    @tzwacdastag8223 Před 4 lety +9

    Thank you for your hard work

  • @codingtutorialsannguyen3924

    Omg thank you! I always wanted to learn sass! Thanks to you I'm a beginner! I'm going to show of to my friends now!

  • @miquel2423
    @miquel2423 Před 3 lety

    I enjoyed it very much Traversy Media. I am currently trying to take a expand my HTML and CSS knowledge and this video was very useful. Thanks a lot man!

  • @chopardissmo6869
    @chopardissmo6869 Před 4 lety

    Look forward to this topic from Traversy for a while, thx man.

  • @nasratt
    @nasratt Před 4 lety +1

    Brad you are great 😊
    Thanks for your educational materials

  • @techboytutorials4733
    @techboytutorials4733 Před 4 lety

    Hello good sir. Congrats again on hitting 1 million. You totally deserve it.

  • @kaonashi5044
    @kaonashi5044 Před 3 lety +1

    Enjoyed this crash course and learned a lot, thank you 🙂

  • @ariel035
    @ariel035 Před 4 lety +1

    Thank you Brad! excellent as always.

  • @competencebooster5316
    @competencebooster5316 Před 2 lety

    Love the way u explain. Thanks a lot.

  • @ashutoshagrawal3076
    @ashutoshagrawal3076 Před 4 lety

    Yipeeeee! Now we can create our own CSS framework. Thank You Mr. Traversy!

  • @ore_bear8045
    @ore_bear8045 Před 3 lety

    the slides was very informative and not boring, great tut !

  • @mariuszgolik7040
    @mariuszgolik7040 Před 3 lety

    You are amazing! You are doing a great job! Thank you very much Brad and best regards from Cracow.

  • @saadarman4718
    @saadarman4718 Před 8 měsíci

    Like always brilliant, this gave me the quick start on the Sass. Thank you 😀

  • @izdann
    @izdann Před 3 lety

    You are the best!!! I bought ur Udemy course and it's really worth it!!!

  • @parthpuri2000
    @parthpuri2000 Před 4 lety +19

    Hey Brad. Thanks for all this amazing content you're putting out here.
    Just wanted to make a small request.
    Is it possible to make a crash course on the basic backend stuff using node. Like all the basics a website needs (logging a user in and maintaining user database + sending out emails as newsletters)?

  • @CPenguinManiacos
    @CPenguinManiacos Před rokem

    Hey, man! Awesome course, as always. Thank you so much, it really helped in understanding this thing.
    You were the one who helped me get my last and current job, you're awesome!

  • @sharepointtips9330
    @sharepointtips9330 Před 4 lety +1

    Thanks Brad.Helpful as always!

  • @otongjrliah4787
    @otongjrliah4787 Před 2 lety

    one of the best humans i can ever name even though i have never seen and met him. he teaches with whole of his heart.

  • @cryptopinnacle7658
    @cryptopinnacle7658 Před 4 lety

    Another great tutorial. Thank you Brad

  • @zakariahilali1297
    @zakariahilali1297 Před 4 lety

    a Big thank you is never enough to people like brad

  • @esportsnexus
    @esportsnexus Před 4 lety +1

    You are awesome Brad. Love you man.

  • @MuhammadIrfan-ch4jm
    @MuhammadIrfan-ch4jm Před 4 lety

    Brad You are great and i learned lot from you channel love you so much

  • @adamploof3528
    @adamploof3528 Před 3 lety

    Awesome course. Psyched to start putting this to use!

  • @jawadkhan8747
    @jawadkhan8747 Před 4 lety

    I was thinking that saas will be to complex to understand, but you did it.
    Thank you Traversy Media.

  • @BO-ny5mm
    @BO-ny5mm Před 4 lety

    Thank you so so much! This made Sass a lot more compelling to me!

  • @elmira5244
    @elmira5244 Před 4 lety +1

    the best video about sass on youtube

  • @resty1672
    @resty1672 Před 3 lety

    It's so neat and professional!

  • @Radiosabines
    @Radiosabines Před 3 lety

    thank you master, as always yours explanations simplified the things....

  • @TheRealJuggaloJoel
    @TheRealJuggaloJoel Před 2 lety

    YASS! Nesting in css makes life so much better.

  • @numberoneBORON
    @numberoneBORON Před 2 lety

    This was very helpful! Thank you so much!

  • @TomasBlackAuthor
    @TomasBlackAuthor Před 2 lety

    Great course! Many thanks.

  • @kasopejohnson3831
    @kasopejohnson3831 Před rokem +6

    Thank you so much Brad! I've been working professionally building apps but I skipped SASS during my learning path because I was being rushed so I only write my custom css with frameworks. Now I know the basics in less than 2 hours!!
    SASS actually makes writing css LIKEABLE! 😂😁

  • @bmehder
    @bmehder Před 2 lety

    Today was the day I started using SCSS, and I am never going back. What's great is you can use it right away and then slowly learn and include features at your own pace. At first, I just wanted the nesting, but I quickly started using variables because the syntax is so nice. In a perfect world, native CSS would work like SCSS.

  • @abirbekaxmedov4623
    @abirbekaxmedov4623 Před 3 lety +1

    Thank you so much Brad. You are super teacher!

  • @arminhabibija9248
    @arminhabibija9248 Před 4 lety

    Simple and very useful! Thank you Brad :)

  • @cybermewt
    @cybermewt Před 4 měsíci

    Awesome crash course! thanks a lot!