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

.header
  color: #f3f3f3;

.header__inner
  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 http://koala-app.com/)

Variables

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

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">
  <ul>
    <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>
  </ul>
</div>

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 a.active {
  font-weight: bold;
}

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

Mixin

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

Extends

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

Loops:

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,

Cheers!