Introduction to SASS

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor — it extends CSS with features like variables, nesting, mixins, and functions. SASS code is compiled to regular CSS that browsers can understand.

SCSS is the newer syntax and is fully compatible with CSS syntax, making it easier to adopt in existing projects.

Example

// Install SASS: npm install -g sass
// Compile: sass input.scss output.css

// SCSS Variables
$primary-color: #3498db;
$font-size-base: 16px;
$border-radius: 4px;

// Usage
.button {
  background: $primary-color;
  font-size: $font-size-base;
  border-radius: $border-radius;
  padding: 8px 16px;
  color: white;

  &:hover {
    background: darken($primary-color, 10%);
  }
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned