Sass Introduction

What is Sass?

Sass stands for Syntactically Awesome Style sheet

It's an extension to CSS, a CSS pre-processor, and compatible with all versions of CSS.

Before starting you should have HTML and CSS basics knowledge.

A browser doesn't understand Sass code. So, we need to convert it into standard CSS.

Why use Sass?

To reduce the repetition of CSS and save time. If you using large stylesheets it'll be hard to maintain.

You can imagine having a large stylesheet with background-color: #4CAF50; and you want to change this value. you'll need to change everywhere manually. But if you use Sass you can change it one time.

.navbar{
    background-color: #4CAF50;
    color: #ffffff;
    border-color: #4CAF50;
}
.info-block {
    background-color: #d4edda;
    border-left: none;
    padding: 32px;
    margin: 24px;
    margin-left: -32px;
    margin-right: -32px;
}
.bottom{
    background-color: #4CAF50;
    color: #ffffff;
}

Tips:

Install sass using NPM: npm install -g sass

Check Sass version: sass --version

Use the command line to convert scss file to css: sass main.scss main.css

Watch changes: sass --watch main.scss:main.css

For more installation info

Let's start learning Sass together step by step:

Sass Features:

• Nested Rules

• Variables

• Inheritance

• Conditions & Loops

• Helper Functions

• Mixins

• Partials

For first feature "Sass Nested Rules"

SCSS Syntax:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS Output Syntax:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block; 
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; 
}

Sass Variables

Variables allow us to define the rest of the variables to reuse them on code. We can store value in variables type:

ex: $variableName: value;

• string

• number

• color

• booleans

• lists

• null

Sass variables scope

Sass variables are only available at the level of nesting where they are defined.

h1{
    font-size: $myFontsize;
}

CSS Output

h1{
    font-size: 18px;
}

Sass !global

we can override the scope variable by using !global

$myFontSize: 18px;

h1{
    $myFontSize: 20px !global;
    font-size: $myFontSize;
}
p{
    font-size: $myFontSize;
}

CSS Output

h1{
    font-size: 20px;
}

p{

font-size: 20px;

}

For more information about Sass. or feel free to ask me.

Protifolio: here
Twitter account: here
Github account: here