Sass a helper for CSS styling

Sass is a JavaScript preprocessor for CSS. It enhances your workflow as a front-end developer by reducing repetition in your coding. The benefit of SASS is that it reduces the amount of code you have to write and help us to write more flexible styles. Sass has many good features that does not exist in CSS such as variables, nesting, mixins, inheritance and others we will explain them in detail in this article.

Variable:

Like variable in javascript we can use variables in sass. We can store a CSS property in a variable and use it in different places. For example, we have a color that we use a lot in our webpage, instead of trying to remember the hex code for that color all the time, we can just store that color hex code in a variable. you create a variable by writing variableName reside with $ sign:

Nesting:

it is much quicker and more efficient. In Sass like HTML we can nest our selectors and add styling to them. Keep this in mind that you should prevent from overly nesting elements in sass because it makes your code more complicated and harder to maintain. Nesting is a good feature to use in css styling for two reason. First, it takes a lot less time to create styles. Second, it keeps all your styles for a particular element or sections on your webpage together in one block rather than spreading them out in different rules.

Partials:

Depends on size of your project, splitting our Sass files up into modules, making it easier to keep on top of css for large projects. For example, we can have one module for gird styles, one module for basic styles, one module for all variables and at the end we just run all of those together to make one core file. This makes your code more modular and keeping your project more maintainable. you create a partial file in Sass using underscore + fileName.

when you create a partial file, You have to use underscore at the beginning of your partial file’s name because that is the indicator that tells our preprocessor that this file defines a partial. So, as soon as you add underscore to the beginning of your file name that tells sass to not create a css file from this because this is a partial.

Importing:

When you modularized your Sass files that each different thing has its own file, you need to import them in your main Sass file. It is gonna compile the Sass files then compile CSS file, and that CSS file is served to the browser.

Mixins:

It is like a function in programing language. They have a name, they accept arguments and they render/return CSS output. You can reference line of codes in mixin by referencing the mixin in other CSS selectors using @include. We can add any argument we want when we include mixin property in our CSS/Sass selector.

mixin also lets you make groups of CSS declarations that you want to reuse throughout your site even if you do not need to pass argument.

Extend/Inheritance:

The extend keyword allows you to have CSS rules that you can include inside other rules. For example, if we have different panels on our website, they all have the same basic styling but we have different variations of each panel, has different size. We can make a CSS rule called “.panel” to share for every panel. So we want all panels in our website to have these properties. One way is to copy and past these properties for every panel, but we can do in other way, instead of coping and pasting we can extend this class in other panel which makes it much easier for us to change a property in one place instead of changing it in all places. So a CSS selector can inherit properties from other selectors.

Operators:

Being able to do the math in CSS is one of the great feature that Sass has to offer. Sass has these math operators which help us to write our styling code easier. + *- /, and %.

Example: if you have a “ul” tag with 6 “li” tags inside of it. You have divided the width of the “ul” tag equally between all “li” tags

Using Sass makes your CSS code simple and flexible to change.