I can appreciate the beauty and economy of Sass, but often find myself bogged down in the increased setup time and learning curve required if it has been a while since I last wrote any of my own. Because I do a lot of varied graphic design work, I can go weeks or sometimes even months between serious coding projects.

There are also times when I just want to test whether or not a certain open-source feature will work for me in a website that I’m working on. If that particular feature happens to rely on Sass, and more often than not an external library like, Bourbon or Neat, I want a way to easily convert the Sass including the necessary libraries to ordinary CSS for quick plug and play application in my work.

I’ve been working on a solution for quite some time and I have finally found a fairly quick and painless process for using CodePen to accomplish this. I think it might be useful to others, so today I’m going to share my workflow.

For this tutorial, I’m going to use the  Cards Pattern (fig. 1) from Refills, a great resource for common web design patterns. Each of their patterns provides us with the code snippets: HTML, SCSS, and JavaScript if necessary used to generate the pattern.

If I reveal the provided code from the site (fig. 2), we can see that this particular feature uses simple HTML and a Sass file that relies on both Bourbon and Neat to work. No, problem, we’ve got this.

First, we’ll need to launch a New Pen in CodePen. (fig. 3)

If you haven’t used CodePen before, it is a resource for designers for testing code without all the setup. It allows you to put in HTML, CSS, and JavaScript free of the folders, files, and boilerplate code, which makes it great for the experiment we are about to perform. It also allows you to save and share your results with others.

The New Pen screen should look something like (fig. 4).

We’l need to Copy the HTML and SCSS code from the Cards Pattern into the designated spots in the CodePen columns. Our final result will appear in the white section below. (fig. 5)

Right now, as we can see, we aren’t getting the same results we saw on the Cards Pattern site. This is because CodePen is expecting regular CSS and we have inputted Sass instead. Here’s where part where we make the magic happen.

We’ll need to change the CSS settings. To open the settings, click the small gear icon at the top left of the CSS column. (fig. 6)

The Pen Settings panel should appear. (fig. 7)

We’ll need to choose SCSS from the CSS Preprocessor dropdown menu. (fig. 8)

Once SCSS is selected from the dropdown, we’ll need to include a few Add Ons. To do this, we can simply click, Need an Add on? (fig. 9)

This will bring up a list of potential add ons for our Sass. Scroll till you see Bourbon and Neat appear in the list. Click the Add button for each of them.

NOTE: Make sure to click the add button for Neat first, then for Bourbon!

Then Save & Close. (fig. 10)

Once you Save & Close, the Pen Settings panel will disappear leaving you with your New Pen. However, now you should be seeing that below the code columns, we now have our cards styled correctly. If you are seeing an error (a little red circle with an exclamation mark) double-check that the bourbon import is above the neat import. If it is not, make the correction. You can do this by just doing a Edit > Cut and Edit Paste into the correct spot in the CSS column. (fig. 11)

We have one last step to complete. We need to compile our Sass into standard CSS. CodePen makes this easy if we’d done the last few steps correctly. We can simply Click on View Compiled from the top right of the CSS column. (fig. 11)

That’s it! We now have standard CSS showing in our CSS column, including everything needed to make the Bourbon and Neat stuff work. (fig. 12)

You can now use this newly generated code directly in any website without Sass knowledge or any external libraries. Just Copy & Paste the code from CodePen into your own HTML and CSS files, and edit as you see fit.

Enjoy!