Sass is a CSS pre-processor.

1. What are Sass and Scss?

• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use
• In css3, sass called scss.

2. How does sass works?

A browser does not understand Sass code. Therefore, 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 some Sass code and then get some CSS code back.

3. Sass variable

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

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

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

#container {
width: $myWidth;
}

4. Sass nesting

SCSS allows us to nest CSS selectors in a similar manner. Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it.

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

5.Sass mixin

The @mixin directive lets you create CSS code that is to be reused throughout the website.

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes. A mixin’s name can be any Sass identifier, and it can contain any statement other than top-level statements.

@mixin name {
property: value;
property: value;
…
}

And the way of calling your mixin.

selector {
@include mixin-name;
}