Introduction to SASS/SCSS


Feb Dao


If you have worked with CSS for a long time, you can feel that it is so boring and "not really smart" - So what can we do to make it "smarter" and more interesting? Let's talk about SASS/CSS

Base on the definition of:

CSS stands for Cascading Style Sheet language, it describes how HTML elements are to be displayed

Therefore, CSS is not really a programming language!!! So, it means we can't use the advantages of a programming language in CSS such as: variables (which currently is supported by CSS Variables), loop, function... 

It's really fun that you are programmer but you can't program with CSS, isn't it? That why we need SASS/SCSS.

What is SASS/SCSS?

As mentioned before, SASS/SCSS is a CSS preprocessor program, it helps you to write CSS in the way of programming language, which has a clear structure, and is easy to develop and maintain. Beside that, there are a lot of SASS/SCSS third party libraries which provide an easier and simpler  way of writing your code.

SASS and SCSS are essentially the same, only different in writing

SASS: with the extension .sass, it uses indentation to separate blocks and the new line to distinguish rules

  color: #f3f3f3;

  border: 1px solid #f3f3f3

SCSS: with the extension .scss, SCSS is Sassy CSS and is the next generation of SASS with the writing way as same as CSS.

- Left: Writing by SCSS

- Right: CSS code was compiled from SCSS


Because of SCSS is a CSS preprocessor, so you need to compile it to CSS code to use. There are many ways to do it, the simplest way is using Koala App (you can download from here

Koala app


The features of SCSS


Using SCSS variables is supper easy, you just need to name the variable begin with $, set a value, then you can call it to use whenever you want


You can change the value of variable when calling it

SCSS - variables 2

At this time, the lighter-color values is different between .header and .footer

Nested Rules

This feature is interesting and used a lot

For example, you are working on a menu with the markup:

<div class="main-menu">
    <li><a href="#" class="active">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>

If using CSS you have to write like this:

.main-menu {
  background: #f3f3f3;

.main-menu ul {
  margin: 0;
  padding: 0;

.main-menu ul li {
  display: inline-block;

.main-menu ul li a {
  text-decoration: none;

.main-menu ul li a:hover {
  text-decoration: underline;

.main-menu ul li {
  font-weight: bold;

But with SCSS, you can do it with shorter and more readable codes

SCSS - nested



Mixin helps you to create the SCSS functions, so you can define styles that can be re-used throughout your stylesheet.

SCSS - mixin



This feature allow a selector can have all the styles of another selector.

SCSS - extend



SCSS - for
SCSS - for


SCSS - While
SCSS - While


SCSS - Each
SCSS - Each


IF condition:




As all the above things, you can see the power of SASS/SCSS, it makes working with CSS as a real programming language. Beside, compiling from SCSS to CSS allows us can use some features such as: auto prefix, compress or not....

Learning CSS is the first step, I recommend you do practice with CSS until you understand the basics, and start working with a real project. You should be using the CSS Preprocessors, and SCSS is one of the options you can chose.

Next articles, I will talk about how to use gulp to create a project with twig and SCSS,

Please let me know your feedbacks about my articles,



Nam Lee

rất cảm ơn bài viết. mong anh làm thêm giố thiệu cách sử dụng Gulp/ Grunt ak .

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.


  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word