SASS Introduction - SCSS Basics, Types, Usage and History

1. SASS Introduction, Basics and Syntax Types

First of all, this SASS introduction tutorial will explain what is SCSS  and its syntax types. Further, the SASS basics that serve as the core to this programming, and how its usage makes it productive for the programmers. Also, it explains a brief history of SASS and why should we use this language in designing web pages.

1.1. What is SASS Programming?

Firstly, what does SASS stands for? Or What is the meaning of this acronym? It stands for Syntactically Awesome Style Sheets. Primarily SCSS is a superset of CSS language and has many advanced features which we CSS lacks. Let's dig deep into the SASS tutorial, know more about some SASS basics, and look at its features furthermore.

1.2. What are SASS Basics?

The list below expresses some basics of SASS language:

• Firstly, it is a further developed style sheet language
• Secondly, it is a useful CSS extension
• Also, it is entirely compatible with all versions of CSS
• Accordingly, it diminishes repetition, consequently, it is a timesaver solution
• Also, it is free of cost and accessible for everyone to write and compile
• Most Importantly, its file extension is .sass or .scss
• There is a huge active developer community of SCSS and growing further
• It is used by popular frameworks like bootstrap and foundation

1.3. What Are the Types of SASS Syntax?

Basically, there are two syntax types that are supported by the SCSS programming language. It's the programmer's choice to write in any one of these syntaxes.

1.3.1. SCSS Syntax

This is the latest syntax with a superset of CSS. It uses .scss file extension. There are only some exceptions otherwise a .css code is a valid .scss code.

.header-nav{
	border: none;
	padding: 15px 30px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
}

1.3.2. SASS Syntax

This is the older syntax of this programming language. It is also called indented syntax and uses the .sass file extension. The only difference from .scss is that this syntax does not use curly brackets {} and semi-colon ;. Instead, it uses indents as brackets and new lines as semi-colons.

.header-nav
	border: none
	padding: 15px 30px
	text-align: center
	font-size: 16px
	cursor: pointer

2. What is the Difference Between SASS And CSS?

Normally, the difference between SASS and CSS is truly understood by expert web designers. Since it is explained in the SASS introduction that it is an acronym for Syntactically Awesome Style Sheets. Hence, its differences from CSS are truly remarkable and are compared in the table below.

3. Why Web Designers Use SCSS Language?

Fortunately, SCSS is like a best friend for programmers. Specifically, it is a preprocessor and creates CSS stylesheets in a programmable way. Usually, CSS is not a programming language therefore, SCSS comes forward to help in this regard and makes it effortless for developers to produce big stylesheets with ease and effectively. Thereupon, the time to create a stylesheet is marginally reduced due to a lack of repetition in SCSS.

3.1. SASS Usage Explained With Example

Suppose a web designer has to design a website and the website features four main colors as shown below:

As there are a lot of things on the website, that need designing and modification. Therefore, the web designer will have to repeat these hex color codes again and again. Now, let's begin the magic of SCSS and see what will its code look like. Consider the example below:

/*
=====Define variables for above colors =====
*/
$color_1: #0f003d;
$color_2: #3300cc;
$color_3: #ad99ea;
$color_4: #333333;

/*
=====Define variables for above colors =====
*/
.header-wrapper {
	background: $color_1;
}
.primary-menu {
	background: $color_2;
}
.left-sidebar {
	background: $color_3;
}
.footer {
	background: $color_4;
}

.header-wrapper {
	background: #0f003d;
}
.primary-menu {
	background: #3300cc;
}
.left-sidebar {
	background: #ad99ea;
}
.footer {
	background: #333333;
}

The above code is transpiled in software and a CSS stylesheet is generated for designing a website. Whenever, there is a need to change the color scheme on the whole site, replace that color in SCSS and transpile it. All the color values will be replaced with new values.

3.2. What is SASS Transpilation and How Does it Work?

A developer should understand what is transpilation. Usually, the code files cannot be employed directly in web designing, just like CSS stylesheets. Because the browsers do not understand it. Therefore, a transpiler is helpful in this regard and transforms the .sass or .scss files into .css standard CSS stylesheets.

4. Brief History of SASS Programming

Originally, it was designed by Hampton Catlin and developed by Natalie Weizenbaum as a feature of the HAML markup language. Weizenbaum and Chris Eppstein extended the its usablity with SCSS script. Within this short history, a large community is developed and various developers helped in reshaping SCSS with different functionalities. Following is the brief information about SASS history: