Sass Tutorial | Tutorial Reference

Learn the fundamentals of SASS (Syntactically Awesome Stylesheets), a powerful CSS pre-processor that reduces repetition, improves maintainability, and speeds up styling workflows.

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time.

It is more stable and powerful CSS extension language that describes the style of document structurally.

This tutorial covers the basics of SASS.

Example

/* Define standard variables and values for website */  
$bgcolor: lightblue;  
$textcolor: darkblue;  
$fontsize: 18px;  
  
/* Use the variables */  
body {  
	background-color:  $bgcolor;  
	color:  $textcolor;  
	font-size:  $fontsize;  
}