Sass-A Revolution In The Realm of CSS
“ Unleashing the Power Within ”
SASS is “Extended Awesome CSS” as the name itself suggests “Syntactically awesome style sheets”.
.scss or we can say scss (Sassy CSS)is nothing but the file extension used for all sass files that need to be compiled by the sass compiler.
Preprocessing
Stylesheets in web applications often become larger, become more complex to handle, and harder to maintain. Sass allows you to use features that don’t exist in CSS like nesting, mixins, inheritance, and others that make writing CSS code, an amazing experience.
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 sass --watch input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css
Variables
Sass allows you to store things like colors, font stacks, or almost any other CSS value you can think of, that you might want to reuse, using this awesome feature. Sass uses the $ symbol to declare a variable.
When the Sass code is processed, it takes the variables we define for the $font-stack and $primary-color and outputs plain CSS with our variable values placed in the CSS.
Nesting
Sass allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
You’ll notice that the ul, liand a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.
Partials & Modules
Sass allows you to create partial Sass files that contain little snippets of CSS that you can include in other Sass files.
A partial is simply a Sass file named with a leading underscore,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. Sass partials are used with the @use rule.
Sass has an@userule that lets you split your Sass into smaller, more maintainable portions.@use rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
Notice we’re using @use 'base'; in the styles.scss file. When you use a file you don't need to include the file extension. Sass already takes care of it, for you.
Mixins
Sass also allows you to create methods that are popularly known as mixins in CSS. A mixin lets you make small chunks of CSS declarations that you want to reuse throughout your code. It ensures reusability and cleaner CSS.
Isn’t it awesome?
It is created by using the @mixin keyword and can be used throughout your code, using the @include keyword.
Extend/Inheritance
By Using @extend, you can share a set of CSS properties from one selector to another. In our example, we’re going to create a simple series of messaging for errors, warnings, and successes using another feature that goes hand in hand with extending, placeholder classes. A placeholder class is a special type of class that only prints when it is extended.
What the above code does is that it tells .message, .success, .error, and .warning to extend the CSS properties of %message-shared.
The magic happens in the generated CSS code, where each of these classes will get all the CSS properties of %message-shared. This helps you to avoid writing multiple class names on HTML elements.
Operators
Sass also 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 you do something like taking pixel values and converting them into percentages without any difficulty.
You can also go through the above video tutorial and can code along for having hands on experience by building a real-time project related to Sass.
Wow, now you have one more amazing technology under your belt, and too in such a small span of time and efforts. Feel Free to Comment For Any Queries.
Thanks for reading, Have a nice day!
