BENEFITS OF USING SASS OVER CONVENTIONAL CSS
By ADMIN| September 11, 2018
CATEGORY : BLOG | BLOG DYNAMIC | DEV
TAGS :
Definitely you require the help of CSS (Cascading Style Sheets) to describe how HTML elements must be displayed on a web page to define styles, design, layout almost everything you need to create a stunning website.But when you start working with large, complex sites, you might start to wonder if CSS could be better. Or if there is any other option. Well, there is. Let’s work out with SASS. 
If you are a programmer, it will only take you 15 minutes to get SASS. But if you are totally new in coding, then you may find a bit complicated. Once you learn CSS with SASS, you won't write CSS from scratch anymore.
Once you have created the variables, you can use them wherever you need to, like this:
When you compile your SCSS files, SASS will replace the variable name with its stored value. Changing the value of the color is as quick as updating the variable content and re-compiling.
But remember, using nesting too much is not a good practice. The deeper you nest, the more verbose the SASS file becomes and the larger the compiled CSS will potentially be. So, overuse of nesting can create:
Now that you have your mixin defined, you can include it wherever you want. Note that because you have declared default values there is no need to pass any parameter:
After compiling, it will be:
If you want to update the default mixin values, you just need to pass the parameters within the @include call.
As you can see, you don't have to provide the file extension name. The import path could contain directories as well, which means you can give your SASS working directory the desired structure.
After compiling your Bootstrap's source files, the new breakpoint will include the new identifier, to all responsive classes Bootstrap generates. Also you would be able to customize default aspects of Bootstrap like colours, fonts, margins, padding, etc.
What is SASS?
SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that lets you use variables, mathematical operations, loops, functions, imports and other functionalities that make CSS powerful from earlier. In some ways, you may think of SASS as a style sheet extension language. This is because it extends the standard CSS characteristics as it introduces the benefits of a basic programming language. So SASS will compile your code and generate the CSS output a browser can understand.If you are a programmer, it will only take you 15 minutes to get SASS. But if you are totally new in coding, then you may find a bit complicated. Once you learn CSS with SASS, you won't write CSS from scratch anymore.Here are the benefits of using SASS:
It's CSS syntax friendly
If you know CSS, you wouldn’t have problem in learning SASS. SASS comes with two different syntaxes: SASS itself and SCSS, the most used one. SCSS syntax is CSS compatible, so you just have to rename your .css file to .scss. Your first SCSS file has been created, just like that.Although it is not anything big or you are not using any abilities SASS provides, but at least you realize you don't need to spend hours and hours to start using SASS. From this starting point, you would be able to learn the SASS syntax as you go.Offers variables whatever you want
One of the great benefits of using a CSS pre-processor like SASS is the ability to use variables. A variable allows you to store a value or a set of values. You can reuse these variables throughout your SASS files as many times you want and wherever you want.Imagine a scenario in which you're building a site with blue colour everywhere - buttons, menus, icons, containers, etc. You're also using a couple of fonts: Ubuntu and Nunito. Using traditional CSS, you would need to repeat the same code over and over, but with SASS you can store these values as variables:Once you have created the variables, you can use them wherever you need to, like this:When you compile your SCSS files, SASS will replace the variable name with its stored value. Changing the value of the color is as quick as updating the variable content and re-compiling.It uses nested syntax
Another benefit of CSS pre-processors is their improved syntax. It allows you to use a nested syntax. It is code contained within another piece of code that performs a wider function. Here nesting allows a cleaner way of targeting elements.Benefits of nesting:- More natural syntax and easy to read
- Prevents the need to rewrite selectors multiple times
- Better code organization and structure
- More maintainable code.
But remember, using nesting too much is not a good practice. The deeper you nest, the more verbose the SASS file becomes and the larger the compiled CSS will potentially be. So, overuse of nesting can create:- Overly specific CSS rules that are hard to maintain
- Selectors that cannot be reused
- Performance issues.
It includes mixins
Mixins are like functions in other programming languages. They return a value or set of values and can take parameters including default values.Let's look at an example. Imagine you have this mixin:Now that you have your mixin defined, you can include it wherever you want. Note that because you have declared default values there is no need to pass any parameter:After compiling, it will be:If you want to update the default mixin values, you just need to pass the parameters within the @include call.Divide and conquer
You can do a number of things in your stylesheets. Add comments into your style sheet and then search for a specific pattern in your text editor, but that's not a great solution. Split your CSS file into smaller parts, but then you will have an HTTP request for each .css file you import.SASS has the @import rule. @import makes your code easier to maintain by importing smaller SASS files. The difference between this and the CSS @import rule is that all imported SCSS files will be merged together into a single CSS file. Thus only a single HTTP call will be requested in the end as you will be serving a unique CSS file to the web server.As you can see, you don't have to provide the file extension name. The import path could contain directories as well, which means you can give your SASS working directory the desired structure.You can customize Bootstrap 4
It has become the most used CSS pre-processor in the front-end. Some of the best front-end frameworks like Bootstrap and Foundation use it. If you are familiar with Bootstrap, SASS will give you the ability to change this web framework by simply customizing its SASS code. Here you only have to change the value of some variables.For example, you may not like the default breakpoints Bootstrap provides, and you would like to add one more. All you have to do is update the $grid-breakpoints mapping variable you will find within the _variables. scss file, to add the new breakpoints you want to support. In the following example we added an extra 1440px breakpoint:After compiling your Bootstrap's source files, the new breakpoint will include the new identifier, to all responsive classes Bootstrap generates. Also you would be able to customize default aspects of Bootstrap like colours, fonts, margins, padding, etc.