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.

Tutorial Contents:

  1. Introduction To SCSS Programming
  2. SCSS and CSS Difference
  3. Reason For Using SCSS Language
  4. SASS History

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.

SCSS Syntax

	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.

SASS Syntax

	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.

Easy to Write Difficult to Write
Code Requires transpilation Direct Implementation in Web Pages
Comfortably Manage Large Websites Hectic to Manage Big Sites
Small File Size Large File Size
Less Coding Lines Huge Coding Lines
Easy to Modify Difficult to Modify
Simple Sheets Complex Sheets
Time-Saving Time Consuming
Need Compiler No Compiler Needed

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.


For your understanding, transpilation is terminology that refers to translating one programming language code into another.

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:

Official Website: www.sass-lang.com
Designed by: Hampton Catlin
Developed By: Natalie Weizenbaum, Chris Eppstein
Release Date: November 28, 2006
File Extensions: .sass, .scss
Extended From: YAML, HAML, and CSS
Influenced: Less, Stylus, BootStrap, Tritium
Give Us Your Feedback
If You Need Any Help!
Contact Us