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 & 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.
Try Canvas Builder →