SASS | part 1

https://sass-lang.com/

Sass stands for Syntactically Awesome Style Sheet. It is an extension to CSS. we can introduce it as a CSS pre-processor. Sass Completely compatible with all versions of CSS. It reduces repetition of CSS and therefore saves time. Designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. And Sass is free to download and use.

Ex:

/* define variables for the primary colors */
$primary_color: #a2b9bc;
$primary_color: #b2ad7f;
$primary_color: #878f99;
/* use the variables */
.main-header
{
    background-color: $primary_color;
}
.menu-left {
    background-color: $primary_color;
}
.menu-right {
    background-color: $primary_color;
}

• 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 kind of program) some Sass code and then get some CSS code back.
• Transpiling is a term for taking a source code written in one language and transform / translate it into another language.
• Sass files has the “.scss” file extension.
• comments /* comment */, and in addition it supports inline comments // comment
• 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 uses the $ symbol, followed by a name, to declare variables:

Ex:

$variablename: value;

SASS syntax

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body 
{
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;
}
#container 
{
    width: $myWidth;
}

CSS syntax (when the Sass file is transpiled)

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