Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY CYBERSECURITY DATA SCIENCE
     ❯   

Sass Tutorial

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

Start learning Sass now »

Examples in Each Chapter

Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result.

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

Run Example »


My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

Track your progress with at W3Schools.com

Sass Function References

At W3Schools you will find complete references of all Sass functions with syntax and examples.

Sass String Functions

Sass Numeric Functions

Sass List Functions

Sass Map Functions

Sass Selector Functions

Sass Introspection Functions

Sass Color Functions