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 AWS CYBERSECURITY DATA SCIENCE
     ❯   

Sass Introduction


What You Should Already Know

Before you continue you should have a basic understanding of the following:

  • HTML
  • CSS

If you want to study these subjects first, find the tutorials on our Home page.


What is Sass?

  • Sass stands for Syntactically Awesome Stylesheet
  • Sass is an extension to CSS
  • Sass is a CSS pre-processor
  • Sass is completely compatible with all versions of CSS
  • Sass reduces repetition of CSS and therefore saves time
  • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
  • Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.


A Simple Example why Sass is Useful

Let's say we have a website with three main colors:

#a2b9bc

#b2ad7f

#878f99

So, how many times do you need to type those HEX values? A LOT of times. And what about variations of the same colors?

Instead of typing the above values a lot of times, you can use Sass and write this:

Sass Example

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

So, when using Sass, and the primary color changes, you only need to change it in one place.



How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.

This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Tip: Transpiling is a term for taking a source code written in one language and transform/translate it into another language.


Sass File Type

Sass files has the ".scss" file extension.


Sass Comments

Sass supports standard CSS comments /* comment */, and in addition it supports inline comments // comment:

Sass Example

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
  background-color: $primary_1; // here you can put an inline comment
}


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.