At times in SaaS projects frontend developers often find themselves writing the same CSS code, module after module. Which is obviously not efficient, if your building multiple modules and features at a time. Why not just use a standard frontend framework? Bootstrap? Or Tailwind CSS? Sure that’s an option but what if your layouts are grid based? Enter preprocessors for CSS a controller/scripting way to think about your CSS using SASS/SCSS.

Popular frontend libraries and frameworks such as Bootstrap are easy to implement. Add a CDN, add a class and you’re done. Great! But what if the project is flexbox based and requires custom layouts for dashboards? What if your layout is a custom grid based one?


 A preprocessors will also help you organize your CSS as well as make them universal so you can port your custom grid designs layouts from project to project. The preprocessor will read your SASS code and write (or compile) your code to common CSS.

Decompresed SCSS files (which are practically CSS) will help you separate code by categories and those themselves into separate files i.e. _responsive.scss_grid.scss_variables.scss etc and link them all inside a single controller like type of SASS file.

scss files

The @include function that lets you call other SASS/SCSS files inside your project. This is great as it lets you organize your CSS while still keeping the http call to one connection when loading your styles.

Inside main style.scss :

@import "variables"
@import "helpers"
@import "grid"
@import "responsive"

In fact you can even minimize your CSS and compile into one line so keep efficiency at 100% optimizing page loading times. The preprocessor will read your .Sass files needed and writes a compress single lined min.*.css which translates to a more efficient connection.

cli comand for sass to compress – change dir for your path dir

sass -t compressed assets/SCSS/style.scss assets/CSS/

This means that coding a layout will be more time consuming over a bootstrap layout, but only once. In my opinion totally worth it as SASS will allow you to code it once and reuse it project after project increasing your SASS library time after time.

Each project will call the required CSS classes project specific meaning you might not need bootstraps flex based layouts much longer. Welcome to your personal lightweight and evolving custom framework developed by you for you.

A pre-processor is much like the Back End of a server but this one is for our CSS. Its a tool for scripting your CSS from our SASS/SCSS files allowing us to organize our code importing snippets of written CSS with a SASS file much like a controller with different models/views. Making our code more organized, reusable and portable regardless of the project.

Basically a pre-processor will take your SASS/SCSS code and write your CSS based on the mixins (snippets of your custom written classes) if your project requires them.

You can create as many mixins as you need on the fly. A process you would usually do anyway time and time again when coding a project from scratch.

As you invest more time in your code you realize where you start to repeat yourself. Traditionally you make a helper class and use the class as required inside the HTML tag. But what if you need to add more custom properties what then make more custom classes? Edit the original class and make a mess having to rewrite things all over?

In such cases you can use SASS @mixin. They allow you to reprint code as needed inside classes while also allowing you to add more customization by adding additional properties. Super handy and fully flexible all while writing less code.

/* define mixin */

@mixin flex {
    display: flex;
    flex-wrap: wrap
    height: 100vh;

/* assign mixin */

div {
    @include flex;

    background-color: #eee;
    text-align: center;

Variables are not SASS only features as regular CSS also accepts a –variables for custom properties. Although with SASS/SCSS a $variable can be much more powerful!

As you call a mixin you can use SASS variables to change properties within the mixin. For example, remember the wrapped flexbox from before? What if you run into the need of a non-wrapped box? Another helper or mixin? No our mixin can read custom variables adjusting code inside the mixin on the fly.

/* define mixin */

@mixin flex($type) {
    display: flex;
    flex-wrap: $type;
    height: 100vh;

/* asing mixin */

div {
    @include flex(no-wrap);

    background-color: #eee;
    height: 100vh;

Sass might not be for everyone as in comparison to a framework its more of a hassle to set up and can be cumbersome to jump between files. Although for some like myself whom usually start from zero and invest lots of time day after day with custom layouts a flexible lightweight framework that I can just extract and plug and play is awesome. Once you get going its hard to do without.

With SASS anyone can develop their own workspace framework where sky is the limit. With freedoms unlike ever seen before with the latest CSS features like grids and transitions. Imagine a animations framework on SCSS with your unique touch and style with awesome animations!

Source: Hackernoon

Leave a Reply