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:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________
🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________
Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________
** 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
source
