Sass Introduction

How it works

Sass adds tools such as variables, modules and reusable rule generators to your styling workflow. The browser still receives ordinary CSS; it does not execute a Sass variable or mixin. This course uses original film-club components to show what is generated and why. Basic HTML, selectors and the CSS box model are useful prerequisites.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass introduction.scss introduction.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

introduction.scss

Download introduction.scss — save at the shown relative path.

$ink: #0f3464;
.screening-card {
  color: $ink;
  padding: 16px;
}

Expected CSS

.screening-card {
  color: #0f3464;
  padding: 16px;
}

The variable exists only while compiling. The output contains a concrete colour and spacing value, so it can be used by any browser that supports those CSS declarations. Sass does not automatically improve a poor selector or inaccessible colour choice.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.