Glossary

What Is Sass / SCSS?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends standard CSS with programming features: variables ($primary: #1abc9c), nesting, mixins (reusable style blocks), functions, and partials (modular file organisation). SCSS is the most popular Sass syntax, it's a superset of CSS, meaning all valid CSS is valid SCSS. Sass files compile to standard CSS before deployment.

Key Sass features

Variables: $primary: #1abc9c; (compile-time, unlike CSS custom properties). Nesting: write child selectors inside parent selectors for cleaner code. Mixins: reusable groups of declarations called with @include. Functions: darken($primary, 10%), rgba($primary, 0.5). Partials: split styles into _buttons.scss, _typography.scss etc., imported into a main file. @extend: inherit styles from another selector (use sparingly).

SCSS and Bootstrap 5

Bootstrap 5 is written entirely in SCSS. The source files in node_modules/bootstrap/scss/ let you customise Bootstrap deeply, override $primary, $grid-columns, $spacer, and hundreds of other variables before compilation. This produces a smaller, fully customised CSS output. The Canvas Template is similarly structured, custom SCSS variables control the entire design system.

Sass in modern build pipelines

Sass compiles to CSS via the Dart Sass compiler (the official, maintained version). In modern stacks: Next.js supports SCSS out of the box (import styles from './styles.module.scss'). Vite handles SCSS via @vitejs/plugin-sass. Webpack uses sass-loader. In 2026, many developers are moving styling to CSS custom properties + Tailwind, reducing Sass usage, but Bootstrap 5 projects still rely heavily on SCSS.

Sass / SCSS and Canvas Builder

Canvas Builder is built on Bootstrap 5's SCSS architecture, the Canvas template uses Sass variables and mixins for its component system. Canvas Builder generates pre-compiled HTML output, so no Sass knowledge is needed to use it.

Start building free

Frequently asked questions

Should I use Sass or CSS custom properties?

Both. Use Sass for compile-time configuration (Bootstrap variable overrides, design tokens, utility generation). Use CSS custom properties for runtime values (themes, dark mode, JavaScript-driven changes). They complement each other rather than compete.

Is LibSass or Dart Sass better?

Dart Sass, the official Sass implementation. LibSass is deprecated. Node Sass (which wrapped LibSass) is also deprecated. Use the sass npm package (Dart Sass) for all new projects.