Does anyone really use Sass modules?

(Updated on ; )

Sass is certainly not a new utility in the developers toolbox, however there are a lot of new features finding their way into Sass. The one feature I find most critical is the module framework. There are tons of great articles on Sass modules, but I wonder just how much utility this feature finds in new projects and whether existing projects are actually migrating to modules.

Perhaps one of the hiderances is the fact there are no Sass modules available with common mixins and complex functions. A great example, is sassy-lists which is packed full of functions to make working with large lists a breeze. But, it is not modular. Similarly, Bootstrap provides a Sass API. However, it is also not written in a modular way, and therefore it is very hard to extract single features into projects.

In order to help people move forward using modules, I wanted to recreate sassy-lists as a module; and at the same time, I wanted to update the API to something JavaScript developers would be more familiar with. The result was the first version of sass-module-list.

Moving on and after working on some more projects, I found myself writing breakpoint mixins. So I took a stab at creating a module for this which took inspiration from Bootstrap. Still, during my development, I found I needed many more features than were available in sass-module-list. So my efforts turned into many more modules, all working together to finally build a module for breakpoints: sass-break.

Finally and lastly, the maintenance of these projects became disjointed and redundant so time was taken to merge them into the Sass Fairy monorepo. This has also made documentation easier, using docusaurus.

Fruits of thy labor

@sass-fairy/color @sass-fairy/list @sass-fairy/map @sass-fairy/math @sass-fairy/meta @sass-fairy/string

These packages all extend and improve upon existing, integrated Sass modules. They provide a combined API to simplify usage.

@sass-fairy/break @sass-fairy/url

The first module provides mixins, functions, and variables for working with horizontal and vertical breakpoints to aid in responsive development. The second, provides Sass functions for working with URL data, encoding, and inline SVGs.

@sass-fairy/exception

This module provides functions to standardize exception messages and assist with common validation.