WHAT IS SASS?

CSS preprocessor Sass is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass stands for Syntactically Awesome Stylesheet.

Sass is perhaps the most popular preprocessor around right now, but other well-known examples include Less and Stylus.

Prerequisite:

• HTML
• CSS

WHY SASS?

• Sass reduces repetition of CSS and therefore saves time.
• Sass is free to download and use.
• Sass lets you use features that do not exist in CSS like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

An overview: How Sass is Useful:-

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

So, when using Sass, and the primary color changes, you only need to change it in one place.

Working mechanism of Sass:

• A browser does not understand Sass code. That is why, you will need a Sass pre-processor to convert Sass code into standard CSS.

• This process is called transpiling. So, you need to give a transpiler (kind of program) some Sass code and it will return you the transpiled CSS.

Sass File Type(extension type):

Sass files uses ".scss" file extension.

Sass Comments:

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}

Tip: Use "cmd+/" in mac and "ctrl+/" in windows.

Sass Installation:

System Requirements for Sass:

• Operating system - Sass is platform independent.
• Browser support - Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera.
• Programming language - Sass is based on Ruby.

Sass Variables

Sass Variables:

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

• strings
• numbers
• colors
• booleans
• lists
• nulls

Sass Variable Syntax:

$variablename: value;

Sass uses the $ symbol followed by a name to declare variables:

SCSS syntax:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

CSS Output:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

Sass Variable Scope:

Sass variables are only available at the level of nesting where they are defined and that block of code is called their scope.

SCSS syntax:

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

$myColor: green; is inside the "h1" rule and will only be available there! (i.e within its scope).

So, the CSS output will be:

CSS Output:

h1 {
  color: green;
}

p {
  color: red;
}

Using Sass !global:

The default behavior for variable scope can be overridden by using the !global switch.

!global indicates that a variable is global, which means that it is accessible on all levels (even out of it's scope).

SCSS syntax:

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

Now the color of the text inside a "p" tag will be green!

Hence, the CSS output is:

h1 {
  color: green;
}

p {
  color: green;
}

Sass Nested Rules and Properties

Sass Nested Rules:

Sass lets you nest the CSS selectors in the same way you do in HTML or loops in programming.

SCSS syntax:

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

Here in Sass, the "ul", "li", and "a" selectors are nested inside the nav selector.

CSS Output:

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 Nested Properties:

Example

SCSS syntax:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

The Sass transpiler will convert the above to normal CSS:

CSS Output:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;