Integrate Yaml in your Sass through Compass

I have been using Sass since many years and every year the way I organise my code changes.

In the last year I have had the opportunity to work a lot on Styleguides, a nice way to create artifacts of code (HTML, CSS and JS) that developers can easily use to prototype their products.

This change has raised a new need for me: reducing duplication of code.

Let’s make an example.

When you create a typography or color palette you can create a Maps or a List with Sass (awesome!) but you also need to create HTML. And what happens when you need to add a new style in your palette?
You have to change both, your sass Maps and your view.

I asked myself: is there a way to centralise some options, in order to help me in maintaining code? Yes, it’s called YAML.

“YAML is a human friendly data serialization standard for all programming languages.”


This repos shows how I integrated Yaml in Compass.

Now it’s easy for me to do a thing like this:

Where yaml function is defined in compass.rb

and my config.yml is something like this

Now the integration with the view.
For this I created an app with Silex and the integration with Yaml.
An example of view could be:

In this way changing the colors array in yaml, both style and view change the same.

Isn’t it cool?
Have a nice styleguiding now 🙂


I’m not a Ruby Developer, I made my best. So please be patient and if you want to help this feature became a gem, let’s do it together.

  • Hey— I might be able to help you get this as a Compass extension. Hit me up on Twitter next week, and we can talk. 😀

    • fabiofabbrucci

      Hi Ian, thanks for your proposal.
      It might be great but I would prefer to create a Gem because in this way also not-compass users could use this feature (yaml and sass integration). Have you ever created a gem?

      • Yes, I have. I am not a huge ruby developer, but I can help you put this together.

    • fabiofabbrucci

      Hi Ian, this is the beginning:

      Are you still available to help me with this project?