Frontend Architecture for Design Systems

Chapter 9. Task Runners

For many frontend developers, Sass was our first build system, or task runner. Before Sass, our workflow was to hit Save on our CSS file and then refresh the browser. With Sass, we took our first step on the journey toward automation nirvana. Some might say that we just added one more terminal command to our workflow, but for those first discovering Sass, that small task was well worth the effort.

When we discovered Compass, we not only found a trove of CSS3 mixins that saved us from visiting CSS3 Generator dozens of times a day, but we also learned about the power of a single configuration file for each project. With Compass, we could create a config.rb file that described the paths to important folders, specified settings for development versus production, and toggled important troubleshooting tools. This single file could be saved and shared with the rest of the team, making onboarding new developers much easier.

As the Sass community continued to grow, a large array of Compass plug-ins began to emerge, providing everything from advanced color functions to grid systems to modular scale to media query management. These tools, all distributed as gems, could be imported directly into any project with Compass.

Compass also allowed module developers to tap into the power of Ruby, accessing local files, performing Ruby functions, compiling Ruby templates, and passing the data back to the Sass file. This allowed people to write modules that used advanced math ...