DEV Community

Cover image for Sass Introduction
Esraa Nasr
Esraa Nasr

Posted on • Edited on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

CSS Output

h1{
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Sass !global

we can override the scope variable by using !global

$myFontSize: 18px;

h1{
    $myFontSize: 20px !global;
    font-size: $myFontSize;
}
p{
    font-size: $myFontSize;
}
Enter fullscreen mode Exit fullscreen mode

CSS Output

h1{
    font-size: 20px;
}

p{

font-size: 20px;

}
Enter fullscreen mode Exit fullscreen mode

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

Protifolio: here
Twitter account: here
Github account: here

Top comments (0)