Transitioning to Sass at Scale

Overview

CSS preprocessors like Sass add a variety of functions that streamline CSS development: variables, nesting, functions, mixins, etc. The documentation is great, the tools are mature, and starting a new project using Sass has a clear and straight-forward workflow. But transitioning a large legacy codebase from CSS to Sass is a different story. CSS syntax errors that may be harmless in production can completely prevent Sass from compiling. But fixing those errors creates a far juicier problem: will we introduce visual bugs by fixing syntax bugs?

At Etsy we faced this exact question multiplied across over 400,000 lines of CSS and 2100+ CSS files. During this talk I’ll discuss the tools we used and built throughout our Sass workflow, from the initial transformation of CSS files using Abstract Syntax Trees (ASTs) to the libsass-powered Sass to CSS render pipeline we have running on all development machines. I’ll cover some of the tools we’ve built in-house to mitigate some of the biggest potential pitfalls of Sass (Sass live lint), how we ramped up our development and production services to gain confidence in our process and how this entire effort led to a single 1.2M line push that didn’t break production and had minimal impact to developer and designer workflows.

This talk was delivered twice: once at CSSConf Nordic in Oslo, Norway in June 2016, and once at SassConf 2015 in Austin, Texas in November 2015.

Slides

Unfortunately neither talk was recorded, but I’ve included full speaker notes on the slide deck.

Resources