We all know that CSS is a very simple language, very easy to understand but it can be hectic if it’s becoming very long. For eg, If you need to tweak a certain color value for a certain element throughout the whole site, you have to find all CSS for that element from the whole CSS file, then you will replace the value for all CSS. So it can be a nightmare.
So one of the best option to get rid of this hectic job is to use sass, a CSS Preprocessor which allows us to write functions to generate blocks of repeated style code. SASS helps us to write CSS faster and more efficiently.It also helps to increase readability. SASS lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance e.t.c.
If you are moving an old CSS project into SASS, you will break the huge stylesheet into organized modules. You will setup SASS partials, use variables, setup a mixing which makes your job easier. Follow the process I mentioned below:
1) Using SASS compiler
There are a number of ways (application)you can compile your SASS to CSS in which some of them are paid app and some of them are free.It depends on which you want to use. Some paid app includes
a) Compass.app (Paid, Open Source)
b) Ghostlab (Paid)
c) Hammer (Paid)
d) Koala (Open Source)
e) LiveReload (Paid, Open Source)
f) Prepros
Others include using grunt, gulp. I prefer using grunt. Here is the link where you can find all the details about how to get start with a grunt.
2) Setting up your SASS partials
If you have just a CSS file, you will start to convert CSS into SASS files. As I said, one of the most advantageous thing about SASS is that it allows you to create separate partials, which means that you can divide your CSS into separate SASS files which make it more manageable. After you make separate SASS files, you will compile those files into a single CSS file and whenever you need to change the CSS you go to the particular SASS files and make changes there. Then after compiling the changes will be saved to that CSS file automatically without touching the huge CSS file. Cool isn’t it?
Generally, my folder structure looks like this
With import, you can combine all the css from the seperate SASS partials into a single CSS file.
3) Creating Variables
Now you have created your partials, you will now make start to refactor the original CSS to fit our SASS preferences. SASS allows you to refactor code using variables, nesting, functions and mixins.Variables are the way through which you can pass all that data in a single place and you can make a site-wide change just changing the value of that variable.
Here is the example of how to do it:
For e.g
There is a variable $color__theme with a value #dcc423. You will use that variable as parameter for all the element of your site.
Like this.
So later if you want to change the color #dcc423 having the variable $color__theme, you will just need to change here
and wherever you have used that variable in your CSS, there will be site wide change in the color value.
Mixins
CSS allows the use of vendor prefixes to ensure the browser compatibility but it can be bit annoying to write that CSS again and again.
For e.g.
.example{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
So SASS allows use of mixins which lets you make groups of CSS declarations which you can use throughout the whole site.
For e.g.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.example { @include border-radius(5px); }
Conclusion
So these are all basics of SASS. SASS provides other lots more functionality which you can try. It may be hard shifting from CSS to SASS at first glance, but it’s not hard at all if you give it a try. Happy coding!
Image Credit:
Arrow Icon: License: Creative Commons
Sass Logo: http://sass-lang.com/
