Introduction

At this point we have a site that actually looks like a site! It has an editable Concrete CMS area and our usable page template. It’s the perfect time to take a look at the styles that our theme ships with, and set them up in a better way.

When we build themes from scratch at PortlandLabs, we take care to build them with CSS pre-processor like LESS or SASS. These files are easy to edit and organize. Then, we compile them to CSS for inclusion in the Concrete theme. Let’s transition to this model for the Dreamrs theme, which helpfully provides its CSS files as SASS files as well.

SASS lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. SASS is delivered by a package manager like yarn or npm. If you’re not familiar with a CSS pre-processor like SASS or LESS, or a package manager like npm or yarn, you might want to read up on these subjects a little before continuing.