Frontend Development Basics: How to Save Time with SASS/SCSS

As a new comer to the development space I recall feeling over whelmed by the amount of time it would take me to complete a project. Working at a development company focused on CMS systems with PHP, my Front End/CSS skills were abysmal. My code was too long and a mess. Filled with repetitious code that looked as messy as spilled spaghetti.

At times I also found myself writing the same CSS code, project after project which is obviously not efficient if your building multiple projects at a time. Why not just use a framework you say? Bootstrap? Or Foundation? 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.

What the potato is a preprocessor and why should I care if Bootstrap is easy, add a class and you're done. Yes you could just add a link and add several classes within your tag.. 1, 2, 3 you're done. Great! If your project is flexbox based and supports it awesome! Although, 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.

The

@include

/* 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 min.style.css - change dir for your path dir */

sass -t compressed assets/SCSS/style.scss assets/CSS/min.style.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.

Need a grid layout? Call your mixin, need a flexbox based layout? You can call a mixin for that too. 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. If you are like me and you have opened up your CSS and see chunks of code repeating yourself...

display: flex: flex-wrap: wrap;

Traditionally you make a helper class and use the class as required inside the HTML tag right?? OK great!

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?

Introducing SASS

@mixin

/* 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

$variable

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!

Welcome to the power of scripting with variables for CSS! Power unlike ever before, but remember with great power comes great responsibility...try SASS out and happy coding :).

Previously published at https://medium.com/@website.dev/how-to-save-time-with-sass-scss-7f0de18e18db