View Categories

SASS

Reading Time: 2 min read

Description #

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that extends the capabilities of standard CSS with features like variables, nesting, mixins, functions, and partials. SCSS (Sassy CSS) is the most commonly used syntax for Sass, and it’s fully compatible with regular CSS.

History #

Sass was created by Hampton Catlin and developed by Natalie Weizenbaum, with the first version released in 2006. Originally using an indentation-based syntax, Sass introduced SCSS in 2010 to provide a more familiar, CSS-like syntax. Since then, it has become a core part of many modern frontend development workflows and frameworks such as Bootstrap.

Key milestones:

  • 2006: Sass first released using indentation-based syntax
  • 2010: SCSS syntax introduced (Sass 3.0)
  • Integrated into major build tools (Gulp, Webpack, Vite)
  • Widely adopted in design systems and UI libraries

Hello World Code #

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    color: white;
    font-size: 2em;
  }
}

How to Run #

Using Dart Sass CLI:

  1. Install Sass: https://sass-lang.com/install
  2. Save file as style.scss
  3. Compile to CSS with:
sass style.scss style.css

Using CodePen or SassMeister:

  • Paste SCSS code into the SCSS editor pane and view compiled output in real time.

Key Concepts #

  • $variables to reuse values
  • Nested selectors for better structure
  • @mixin and @include for reusable code blocks
  • @extend for inheritance
  • @function to define custom functions
  • Partials with _file.scss and @use or @import
  • SCSS syntax is CSS-compatible
  • Modular styling in component-based architectures
  • Used in frameworks like Bootstrap and Bulma
  • Compiles to clean, standard CSS

Try It Online #

Fun Facts #

  • SCSS syntax is now the default and preferred way to write Sass
  • Bootstrap used to be entirely built on SCSS
  • Sass can reduce thousands of lines of CSS into modular, maintainable code
  • It’s one of the first tools that brought logic into stylesheets
  • Sass is written in Dart since the rewrite in 2019 (Dart Sass is the reference implementation)

Resources #

Updated on June 7, 2025

What are your Feelings

  • Happy
  • Normal
  • Sad
Scroll to Top