Sass and BEM for beginners

____________________________

In this video I'll walk you through the basics of Sass, BEM (block-element-modifier), and the principles of responsive design. This is a standalone course in Sass that's taken from my full course, Responsive Design for Beginners.

0:00 - Intro
0:22 - What is Sass?
1:17 - Compiling Sass with VS Code extensions
12:49 - Sass partials
26:17 - Sass variables and CSS custom properties
43:45 - Building the demo responsive website
50:00 - Sass and BEM
57:08 - Building the responsive mobile layout
1:04:30 - Building the desktop layout
1:18:10 - Setting widths
1:36:08 - Sass mixins
2:06:35 - Responsive typography
2:33:24 - Sass functions
3:03:39 - Why I use em units in media queries
3:10:49 - Nesting and BEM
3:35:23 - Helper/Utility classes

____________________________

🔽 FOLLOW CODER CODER

#css #javascript #html

[TheCoderCoder]

🚨 Hey folks, if you're having trouble with @forward not working, make sure you're using Glenn Marks' Live Sass extension, *not* the original one by Ritwick Dey. The original one won't work with the new Sass syntax!

[stucowley]

👏 Amazing! This course is so in-depth, well thought through and current. It has provided me with updated knowledge that I really couldn't be bothered re-learning again, into an easy to follow and understand way. I have been using Sass for 10 years without really updating my knowledge, but within 2 hours I was ready to get started with modern Sass techniques. Thank you so much!!!

[quincylarsonmusic]

Awesome. This is really well-taught. And I love the subtle animations and transitions. It is clear you put a lot of thought and love into this course.

[roysandoval]

I really enjoyed how you organized the content and went over the fundamentals, it made learning Sass super easy and enjoyable. I was also able to brush up on a few CSS techniques. Thank you for sharing this amazing tutorial!🙌🏼

[heirofsam]

I recommended my college mates ( literally 12 people) and bro they loved it😭. Everyone respect me now lmaoo
Much love to you haha❤

[TheNinjatsu]

When you think of a topic and one of your favorite youtubers upload a 4 hours course about it. Bless you.

[codernerd]

The quality of this video makes me want the full course even more! Thanks for all your hard work making this!

[josesirias]

Out freaking standing! I've been looking all over youtube for a tutorial on Sass. Most of them are outdated and still use @import instead of @use and @forward I'm more of a visual learner, even though I read the documentation on the Sass website I still couldn't figure it out but your video is quite clear. Thank you so much for taking the time to create this awesome video!!! Keep up the great job you do.🔥🔥

[mbm]

Wow this video is packed with cool stuff. It's not just sass but there's Bem, responsive design and more cool 😎

[mbm]

Finally a video on Sass !!! I didn't even watch yet but I now its gonna be 🔥

[ordaniel]

Wow, I watched many tutorials in the past, this is by far the most descriptive one I've watched. You pause on things that maybe not everyone is familiar with, and in 60% of the cases I know them all so I skip, but when I don't know something, I thank god that you pause and elaborate on those. Thank you so much for this video!

[kanjurer]

I WAS LITERALLY GONNA IMPLEMENT SASS ON MY NEW BLOG

thank you so much <3

[eliasestebanalonzo]

I'm in love with your content in general, extremely significant. This is high quality for people like us who enjoy learning more every day about web development. Greets from Paraguay

[kapitantan]

The "Preference: Open Settings (JSON)" is not showing in the command pallete. 3:04 mark. Can someone help me:((

[EduardoBarros]

5:45 before deleting, ctrl + space also show options.

[ogunkayodeoluwaseun]

Thank you so much for this heavenly walkthrough still on the first half of the tutorial I wanted to bring to your attention that the sass compiler said this

using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0

Recommendation: math.div($pixels, $context) or calc($pixels / $context)

[Oliwin]

I'm documenting everything i learn as a 'vlog'/'series' type thing and this video helped me out a lot in the last episode! Thanks a lot <3

[vijitaa]

I was trying to build my first ever portfolio website & I realized that my css approach was too shabby and so I thought about looking at sass and reached here.
What a knowledge-dense and amazing video this was. It filled a lot of gaps in my knowledge & also helped me find a new approach on building a website.
Cannot thank you enough! ❤

[sigfredoolmedo]

Thank you so much for this course, this is the only course I've seen that uses the new @use and @forward at rules for the structure of the project. Also, thank you for the explanation on the BEM metholodogy. Great course!

[VinceM]

Great job! Booking a night off to go through this a few times. The quality is top notch and the teaching is down to earth and easy to follow. Love all of your videos! Can't wait for the full course!