Converting Sass to CSS

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.

Cards Pattern from Refills Site


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.

Refills Card Code

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

Code Pen New Pen

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).

Code Pen Blank Pen

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)

CodePen with Pasted Code

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)

CodePen CSS Settings

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

CodePen Pen Settings Panel

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

CodePen Pen Settings Dropdown

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)

CodePen Pen Settings Add On

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)

CodePen Pen Settings Add On Bourbon and Neat

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)

CodePen with Sass

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)

CodePen View Compiled

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)

CodePen Compiled

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



Web Design For Graphic Designers Book Cover

Web Design for Graphic Designers

A Step-by-Step Guide for creating a modern, responsive website from scratch

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free

Leave a Reply

Your email address will not be published. Required fields are marked *