Sass Blog

Page 9 of 9

How @extend Works

Posted 23 November 2013 by Natalie Weizenbaum

This was originally published as a gist.

Aaron Leung is working on libsass and was wondering how @extend is implemented in the Ruby implementation of Sass. Rather than just tell him, I thought I’d write up a public document about it so anyone who’s porting Sass or is just curious about how it works can see.

Note that this explanation is simplified in numerous ways. It’s intended to explain the most complex parts of a basic correct @extend transformation, but it leaves out numerous details that will be important if full Sass compatibility is desired. This should be considered an explication of the groundwork for @extend, upon which full support can be built. For a complete understanding of @extend, there’s no substitute for consulting the Ruby Sass code and its tests.

This document assumes familiarity with the selector terminology defined in the Selectors Level 4 spec. Throughout the document, selectors will be treated interchangeably with lists or sets of their components. For example, a complex selector…