Why SASS is Awesome ?
SASS is “powerful CSS” or we can say it’s sassy CSS, as the name itself says “Syntactically awesome style sheets”.
Almost all powerful Javascript frameworks e.g., Angular comes with SASS in boilerplate. It’s too powerful yet very easy to understand and leverage it’s benefits.
.scss is nothing but the file extension used for all sass files that needs to be compiled by the sass compiler.
Features of SASS
CSS(traditional) compatible
Mature and Stable
Industry Approved
Large Community
Framework supports
Preprocessing
Stylesheets in applications are getting larger, more complex, and harder to maintain. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again
~more maintainable
~more readable
~more extensible
Once Sass is installed, you can compile your Sass to CSS using the sass command. You'll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.
--watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass.Variables
Now you can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable.
When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. We can ensure more readable code by nesting code.
You’ll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.
Partials & Imports
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain.
A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file.
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass builds on top of the current CSS @import Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
Let’s say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.
Notice we’re using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss. Sass is smart and will figure it out for you.
Mixins
Yes now we can create methods aka. mixins in css. Isn’t it cool ? It works like method once defined can be used anywhere, can accept arguments as well.
Best thing to ensure reusability and cleaner css. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
It is created by using @mixin keyword and can be used throughout using @include keyword.
Extend/Inheritance
This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. Just like creating a base class with abstract properties declared and then extending the base class to other classes, it can be done here too.
What the above code does is tells .message, .success, .error, and .warning to behave just like %message-shared. That means anywhere that %message-shared shows up, .message, .success, .error, & .warning will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as %message-shared. This helps you avoid having to write multiple class names on HTML elements.
Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.
We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.
Thanks for Reading.
Reference : https://sass-lang.com documentations.
