5 Reasons You Should Learn Sass In 90 Seconds

To give your CSS superpowers check out my full Sass tutorial.

Sass is CSS with superpowers. Sass stands for Syntactically Awesome Style Sheets. It’s an extension to CSS that helps to write more organized and flexible styles. Browsers cannot understand Sass so it must be translated, or compiled into CSS. But don’t let that scare you! It’s easy with a simple VS Code extension.

There are several reasons why you should be using Sass. These are in no particular order:

- Variables -
I know that CSS has variables also, but Sass had variables first and there are several reasons why they are better. One reason is that Sass variables are imperative, which means if you use a variable and then change its value later, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it will affect both earlier uses and later uses.

- Logic and Directives -
Sass supports four flow control rules that make it possible to control whether styles get applied, or to apply them multiple times with small variations. These are @if / @else, @each, @for, @while. Also, functions allow you to define complex operations that you can re-use throughout your stylesheet.

- Based on CSS -
Sass is based on CSS, so there is no need to relearn an entirely new language. You can still write normal CSS and start using features of Sass as you learn them.

- Modules -
You don't have to write all your Sass in a single file. You can split it up however you want. This is a great way to modularize your CSS and help keep things easier to maintain. The great thing about this is that these files all get compiled into one CSS file in the end. So there will not be multiple HTTP requests for multiple files on your site.

- Nesting -
With normal CSS there is no visual hierarchy. With Sass we can nest CSS selectors in a way that is visually easier to consume. But do be careful not to overly nest rules. This will result in overqualified CSS that could prove hard to maintain and is generally considered bad practice.
_____________________________________

📚 Learn to CODE in just a FEW months here:
_____________________________________

🛠️ Tools I use:

_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #sass #scss

[codeSTACKr]

Thanks for all of the support!!
Next up Learn Sass in 30 Minutes:

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

[ben]

1. The fact CSS variables can change after execution sometimes be very useful. They are used a lot for changing all values based on media queries like 'prefers-color-scheme'. 2. 'SCSS' is based on css but 'SASS' makes several changes to css. 3. CSS has modules / imports as well with @import meaning you can write css across multiple files without sass (which can have caching benefits!).

I kinda wish you included mixins and inheritance as those are very powerful. Nesting is great! Other than that good concise video!

[tambolaking]

The quality of content is getting better. Keep going

[rehmanarshad]

Okay now I might learn this. Been using CSS for a while now. And I think adding conditionals and loops would be really useful

[Knards]

I learned SASS from the great Travis Neilson, and use his method of separating all parts of CSS into 6 modules. I've used it so long, I am not sure I could or even want to write a regular CSS page. I use SASS not SCSS

[khanbro]

Title: 5 reason you should learn sass in 19 seconds.

Me: 90÷5 = 18

1 reason you should learn sass in 18 seconds.

[Hotatoes]

Awesome but can u talk more about this variable declaration thing with live example ?

[SierraGolfNiner]

Great video for an intro. But could you please cut back on the effects a touch? The "old timey film" effect was SUPER annoying and EXTREMELY distracting. Other bits like the lightwave/pulse when talking about variables added nothing and accentuated no points.

[thevloglife]

Which better prefer?
$Primary_color (underscrore)
OR
$Primary-color (hyphen)

[rikipebrianto]

hi admin, i see extension .sass and .scss what difference?

[whitecat]

should i learn Straight to Sass instead of learning CSS first?