Sass-ception! Style Guide

Recently, another Codepen that I made for my students made the front page of!

As an intro to Sass, I wanted to show my students some of the fancy-pants things that are easy to do with Sass (specifically, working with color).

I created a “style guide” that does several color calculations and displays content from Sass variables on the page using :after content. Totally not suitable for a production page, but fun for an experiment.

Plug in your own colors and fonts in the stylesheet, wait for the refresh, watch it all adjust.

See the pen on CodePen.

I love, love, love Sass and the power of working with variables; something like this is a great way for others to “get it” quickly. I was excited that the reception to this pen was great in the classroom when I originally created it (early November 2015) and when it was featured (April 2016).

However, I’m even more excited to see that it’s sparked an idea from another developer, @mvaneijgen. I got an email from Mitchel this morning with a link to his take on the pen. He wanted a more modular version that could generate its own HTML, so using Jekyll and jQuery, he made it happen! You can follow his style guide work on GitHub.

© Stephy Miehle as Blinding Stars