Syntactically Awesome Style Sheets

The inevitable next step after learning native CSS3 is to try out its preprocessors. On this project, the main goal was to learn Sass basics such as partials, mixins, and so forth. The secondary goal was to figure out how a Sass project is structured.

As an added challenge, I also aimed to figure out how theming with Sass works. This essentially meant trying to figure out an optimal configuration for my file hierarchy so that I could potentially create a multiple themes for multiple websites while still using the same code base.

Please note the content has been greatly reduced due to file limitations. However, all the Sass files are available for viewing.

Otherwise, keep on scrolling to read up on the creation process.

↓

Learning Sass Basics

To make things a little easier, I stuck to learning Sassy CSS (SCSS) as opposed to the other formats. This provided me with a considerable leg up towards understanding the basics. Even then, Sass is still essentially just CSS; it's just structured a little differently.

In fact, once I got a little more used to partials, imports, and all that, the project eventually morphed into more of a study on modular development. Although the concept seemed straightforward enough, it nonetheless took a good while to get used to. It took even longer to find a process that I could consider 'good enough'. Even then, it's obvious that my file configuration process still needs major tweaking.

↓

Theming With Sass

Once I figured out the basics of the coding and file structuring, I moved on to the hardest part: theming with multiple websites. Essentially, the idea is that you have a '1st layer' of base code which all the websites follow. For instance this could be the border box around an image.

The theme can then be considered the '2nd layer' of CSS which you place on top of the '1st layer' base code. Going back to our example, this theme could have a declaration that the border around the image box should be blue.

So, if each website uses the same '1st layer' but then follows their own '2nd layer', the images on each website could all have the border box but they could all be colored differently. That's theming in a nutshell.

This project was essentially all about finding a way to structure all those modules, layers, and pieces in as optimal a way as possible.

♦