Like other programming languages, Sass allows variables. Under this variables we store some information and this is used anywhere in our css.
CSS supports logical nesting, but codes blocks themselves are not nested. But Sass allows the nested code.Example here:
One of the advantages of using preprocessors is their ability to take the complex, long-winded code and simplify it. This is where mixins come in handy!
Partial Sass files contain little snippets of CSS that we can include in other Sass files. It is a great way to modularize our CSS and help keep things easier to maintain. Partial is simply a Sass file named with a leading underscore, something like this _partial.scss.
Our created _partial.scss we can @import in our current file and create a single CSS file. It makes our CSS file organized.
you have a 2 Sass files, _reset.scss, and base .scss. We want to import _reset.scss into base.scss.
@extend directive has been called one of Sass’ most powerful features. Using @extend we share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.
border: 1px solid #ccc
Here we see this classes .message, .success, .error behave just like %message-shared. That means anywhere that %message-shared shows up, .message, .success, .error 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 us to avoid writing multiple class names on HTML elements.
In Sass we’ll have access to standard maths functions like addition, subtraction, multiplication, and division.
CSS preprocessors reformed frontend development. While some designers cannot imagine working without them, others have a doubtful approach towards them. I hope that by bringing closer the topic of preprocessors I encouraged you to give them a chance. Who knows, maybe they become an integral part of your everyday workflow.