Sass Tutorial: Using a CSS Preprocessor

Sass is one of CSS preprocessor that can make writing CSS faster and more efficient. You might have heard of Sass, but not know how to set it up or integrate it with your projects. You can learn more about Sass on the official page here.

What is Css Preprocessor?

A preprocessor is a program that takes a bit of code and compiles it into a different bit of code because Sass has features that don’t exist in CSS yet like variables, nesting, mixins, inheritance, and other. So you can write some CSS code like programming language. In the case of CSS preprocessors, we’re compiling the Sass language into regular old CSS that the browser can interpret. Therefore, the code you use on your HTML page will be the same as with CSS.

SASS or SCSS, what’s the difference?

When I refer to Sass in this article, I’m referring to the entire Sass project. Within Sass, there are two different preprocessors:

  • Sass – Syntactically Awesome StyleSheets: .sass extension
  • SCSS – Sassy CSS: .scss extension

You can choose to use either, but throughout this article we’re going to use SCSS. SCSS is more widely used, and much easier to get started with and integrate with existing projects – in fact, if you take any .css file and save it as a .scss file, it is now a valid SCSS file.

SCSS uses all the syntax we’re familiar with in CSS:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;

Sass does away with the syntax, and relies on forced indentation.

$font-stack:    Helvetica, sans-serif
$primary-color: #333

  font: 100% $font-stack
  color: $primary-color

It seems cleaner and easier, but as it is much more difficult to implement with existing projects, SCSS is the vastly more popular choice.

Why should I learn Sass? How important?

There is a bit of a learning curve when it comes to using and setting up Sass. You should already be proficient, or at least competent with CSS before attempting to learn a CSS preprocessor.

By 2020, all projects involved in both design and development must use Sass. Because it is easily modified and implemented. For example, the most popular CSS framework, Bootstrap, has been using Sass since version 4 was launched.

The Sass Guide on their official documentation is a fantastic getting started guide to understanding what Sass can do. If you’re not familiar, spend a few minutes going over the guide. It would be hard for me to make understanding the basics any clearer than they already have. Instead, I’ll sum up a few of the terms.

  • Variable – A variable is a storage container for a CSS value, such as a color or number. The syntax is written as $variable. You can use this code throughout the stylesheet after you have defined it.
  • Nesting – Nesting reduces repetition in code and makes writing CSS faster and easier like @if, @each, @for, and @while.
  • Partials – Partials are SCSS files that begin with an underscore (_partial.scss) and are not compiled into their own CSS files, but are rather imported into a main file.
  • Import – Use @import to compile all your partials into one file.
  • Mixins and Include – Use @mixin for repetitious CSS, such as when vendor prefixes are required and call @include to use mixins.
  • Extend – Use @extend to change a few key aspects of otherwise identical elements – such as a group of buttons with different colors.
  • Operators – Operators allow you to use math calculations in your CSS – such as defining the width of various parts of a layout.

Let’s create simple projects with Sass

At first, you need to install the vs code or Visual studio code, link in here. Why I choose vs code? because you can use it for Windows, Linux, or Mac (cross-platform). So you can’t learn more about the Command line to compile Sass language.

Create folder Sass_projects and open it on vs code.

Further, we need to install Live Server and Live Sass Compiler extension. These both extension will help us to Compile Sass lang and Live browser reload. So if you save all of the files on your Folder opened in vs code, the browser can compile and reload browser automatically.

Now, we need to settings the Live Sass Compiler to save the CSS file after compile from Sass/Scss to folder css. Go to settings ctrl + , and type on search bar live sass and on settings formats choose edit in settings.json, view image below.

Make sure the savePath is “./css”. That means you save it to Css folder.

Okey, you’re done. Let’s create basic HTML and simple Sass file.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Sass Tutorial - MACode ID</title>

  <link rel="stylesheet" href="css/style.css">

  <div class="wrap">
    <h1 id="title">Hello World</h1>
    <p>Have a nice day, keep hard-working, and don't forget to rest.</p>

Notice here we direct the link tag to the css folder and refer to the style.css file.

$font-base: "Open Sans", sans-serif;
$line-height-base: 1.65;

$line-height-heading: 1.2;

$primary: #2362f5;
$secondary: #646772;

$wrap-width: 900px;

body {
  margin: 0;
  font-family: $font-base;
  line-height: $line-height-base;

h1 {
  color: $primary;
  line-height: $line-height-heading;

p {
  color: $secondary;

.wrap {
  display: block;
  margin: 50px auto;
  max-width: $wrap-width;

Save it on a folder sass, and then open the Command Palette or press CTRL + SHIFT + P, type Live Sass: Open Live Sass Output Window.

Now you have the style.css and files, and after you modify the style.scss, files on css folder will be modified to. It’s simple right?

Further, open the Command Palette again and type Live Server: Open with Live Server. Your default browser will be automatically open up. Now, if you modify all the file on Sass_projects folder, the browser will be reload automatically.

The output will be:

Bootstrap Tutorial

Bootstrap Tutorial: Using a CSS Framework

Have you likely heard of Bootstrap? What do you know about that. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

This guide is meant as a first look into Bootstrap for beginners, so won’t be going into LESS and Sass integration, which are more intermediate/advanced concepts. While it’s written for the current, stable version Bootstrap 4, the concepts will remain the same for future versions.

Before starting, it’s important for you to understand HTML and CSS first, at least fundamentally.

Is the framework important?

You absolutely don’t need to use a framework to build a website design. But, the framework is to help you to build a responsive web design easily and quickly. Frameworks are very popular and have many benefits, so it’s important to learn how to work with them.

Some of the ways that frameworks can help you:

  • Prevent repetition between projects
  • Utilize responsive design to allow your website to adapt to various screen sizes.
  • Add consistency to design and code.
  • Quickly and easily prototype new designs
  • Ensure cross-browser compatibility

Generally, every web project you work on will need to be responsive and work properly on all the major browsers, and likely have some fallbacks for older browsers. Bootstrap has a huge open source community that works on covering this so you don’t have to. Additionally, when multiple developers all know the same system, they can work in better harmony – and it also makes it easier for newcomers on a project to get up to speed.


To use bootstrap you need at least these 3 main file below!

  • bootstrap.css – a CSS framework.
  • bootstrap.js – a javascript/jquery framework.
  • jquery.js – javascript library.
  • popper.js – plugins (optional).

What is jQuery? jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross-browser compatibility to JavaScript. Bootstrap was built with jquery, so we need that jquery to run bootstrap function. 

The grid is probably one of the most essential aspects of the framework. It’s the basis on which the entire layout is created. Generally, the bootstrap has 4 different sizes for each device type, xs for mobile, sm for tablet/mobile on landscape mode, lg for laptop/tablet on landscape mode, and xl for desktop. The calculation is that each full screen has a total of 12 columns. See the image below.

Bootstrap Grid

Okay let’s begin!

Building basic template

Firstly, create some directory as we need, like css, and js folder. Download the latest version of bootstrap here. Put bootstrap.css to the CSS folder and bootstrap.js to the js folder. Don’t forget to download jQuery here and choose version 3.5.1 and put it to the js folder. It looks like:

Folder Structure

For alternatively you can use bootstrap CDN.

<link rel="stylesheet"> href="">
<script> src=""></script>
<script> src=""></script>
<script> src=""></script>

Further, we need to create a index.html. I recomended to use HTML5 boilerplate template, because this template is standar for every responsive website. Or view simple example to start from, see code below:

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Hello, world!</title>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Bootstrap JS -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

Well done, we have made a simple hello world template with bootsrap. Now, let’s check out our awesome new site.

Hello world text in browser

See what we work with bootstrap. About free templates that’s build with bootstrap. See Our projects