Sass Tutorial

Sass HOME Sass Intro Sass Installation Sass Variables Sass Nesting Sass @import Sass @mixin Sass @extend

Sass Functions

Sass String Sass Numeric Sass List Sass Map Sass Selector Sass Introspection Sass Color

Sass Exercises

Sass Quiz

Sass Tutorial

SASS is an extension of CSS. It is also known as CSS pre-processor.

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which help to

  • Reduce repetition with CSS. You don't need to repeat similar CSS again and again in your project
  • Saves the time.

It is more stable and powerful CSS extension language that describes the style of document structurally. Sass is completely compatible with all versions of CSS. you can seamlessly use any available CSS libraries.

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;
}

History

Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. After the initial development, Natalie Weizenbaum and Chris Eppstein continue with its initial version and extend Sass with SassScript, a simple scripting language used in Sass files.

Features of Sass

  • Sass is fully CSS-compatible.
  • It is more stable, powerful and elegant than CSS.
  • It is based on JavaScript and is superset of CSS.
  • It has its own syntax and compiles to readable CSS.
  • It is an open-source pre processor that is interpreted into CSS.
  • It supports language extensions such as variables, nesting, and mixins.
  • It provides many useful functions for manipulating colors and other values.
  • It provides many advanced features like control directives for libraries.
  • It provides well-formatted, customizable output.

Sass Quiz

Test your Sass skills with a quiz.

Sass Quiz