Sass: the CSS preprocessor that changed styling

Cloud & Web Apps

Development of modern web applications and APIs, cloud native architectures, containers, CI/CD. End-to-end Open Source tech stack.

Discover →

The limit of raw CSS

In the mid-2000s CSS lacks basic features: no variables, no functions, no modules, no reuse. Large stylesheets become repetitive (colours replicated everywhere, calculations by hand). The community seeks preprocessing tools.

Sass is born

Sass (Syntactically Awesome Style Sheets) is created by Hampton Catlin in 2006 and developed primarily by Natalie Weizenbaum from 2008 onward. Initially part of the Haml framework (HTML templates for Rails). MIT licence.

The original syntax is indented, Python-like:

$primary: #3B79B0

.card
  background: $primary
  &:hover
    background: darken($primary, 10%)

Main features

• Variables — $primary: #3B79B0
• Nesting — rules nested like HTML
• Partials — _buttons.scss importable with @import
• Mixins — reusable blocks with parameters @mixin, @include
• Functions — @function logic, mathematical operators
• Color functions — darken(), lighten(), mix(), rgba()
• Loops and conditionals — @each, @for, @if
• Placeholders — %class-name with @extend

Early ecosystem

The implementation is Ruby Sass (gem installable via gem install haml). The Haml framework (template engine) includes Sass as a component, but Sass is already distributable as an independent tool.

In the Italian context

In the most up-to-date Italian frontend teams, Sass is starting to appear in Rails projects and some custom WordPress builds. Mass adoption will depend on Sass’s ability to decouple from Haml and to offer a syntax closer to CSS.

References: Sass (2006). Hampton Catlin, Natalie Weizenbaum. MIT licence. Haml and Ruby Sass as first distribution.