Home » BLOG » Web Designer » SASS, CSS framework and Task runners

SASS, CSS framework and Task runners

category:  Web Designer

Many years ago, I worked with a web designer. What she did, she designed and created the templates for the web applications and gave to the developers to integrate into the web application. At that time, I never used CSS frameworks or any pre-processor compiler before. I just used the templates and stylesheet that she created.


But there were many times that I needed to adjust the color, padding and so on in the templates in order to fit my needs. What I did, I had to either adding the custom stylesheet or using find and replace the piece of code I needed to change in the templates. I asked myself why I had to do so much work if I just wanted to change the color or small things in the templates.


Since I am a developer, I use the conditional, loop or variables often. Those methods save my development time and make code clean and easy to modify. So I started to do some research and found Bootstrap CSS framework and SASS which is a pre-processor compiler. Plus I learned the grunt and gulp which are the task runners. Combine those three tools, they made my work faster and fun to work with.


Bootstrap CSS framework is one of the popular CSS frameworks. Personally, I use it often. It is easy to use, easy to learn and give me more options to use. Since 2017, bootstrap releases bootstrap 4 which adds the flexbox feature and SASS files. I sometimes use the framework to build the prototype with API data for my clients. It is a fun tool to use.


SASS is a pre-processor compiler. With SASS, you can use variables, nesting, partials, import, mixins, extend/inheritance and operators. Also, you can use the built-in functions to help manipulate numbers.


Grunt and Gulp, they both are the task runners. Personally, I use Gulp since the code is easy to understand and shorter than Grunt. With Gulp, you can install more useful packages and use in your project, for example, minify CSS and HTML, compile SASS, concatenate the files and compress the images. Beside Grunt and Gulp, you can use Webpack and ParcelJs.