SASS compilation to CSS

Introduction

SASS lets you write styles in a simpler way with variables and nesting. But browsers only understand CSS, so you need to turn your SASS code into CSS first.

When you want to use variables for colors or fonts in your styles.

When you want to organize CSS rules inside each other for easier reading.

When you want to use mixins or functions to reuse style code.

When you want to write cleaner and shorter style code that browsers can understand after conversion.

Syntax

SASS

sass input.scss output.css

Run this command in your terminal where your SASS file is located.

It converts the SASS file named input.scss into a CSS file named output.css.

Examples

This converts the file styles.scss into styles.css.

SASS

sass styles.scss styles.css

This watches the styles.scss file and automatically updates styles.css when you save changes.

SASS

sass --watch styles.scss:styles.css

Sample Program

This SASS code uses a variable for the main color and nests the h1 style inside the body style. It also uses a color function to lighten the text color.

SASS

@use "sass:color";

$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
  color: color.scale($primary-color, $lightness: 50%);
  
  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}

Important Notes

You need to have SASS installed on your computer to run the sass command.

Use the --watch option to save time during development by auto-updating CSS.

The output CSS file is what you link in your HTML for styles to work in the browser.

Summary

SASS code must be compiled into CSS for browsers to understand it.

Use the sass command in the terminal to convert .scss files to .css files.

The --watch option helps by updating CSS automatically when you change SASS.