Being a bit slow to adopt Sass I’ve been playing catch-up over the last year and slowly adopting it into my workflow and making a standard part of how I write my CSS and as I’m sometimes a bit of a slow learner when it comes to drier, more code based things I thought it might be good to share a couple of things I’ve learnt while updating some work and personal projects to run with Sass.
I spent yesterday giving this site a much needed overhaul at theme level (using my Barebones Sass base) to tidy up the old HTML and CSS as it was like many sites I’ve had for more than a couple of years, a little clunky and less than optimal because it’s
“I’ll just refactor this little bit here” pic.twitter.com/Nf4FTSBjNH
— James Young (@welcomebrand) January 27, 2014
Having tried to start a Sass project from scratch a couple of times it can sometimes feel a little overwhelming trying to plan out how to break down a site into many smaller, modular components but if you’re getting into working with Sass I’ve found it very helpful working with a familiar older project such as this site or our Cutting Edge Knives site which I’m also refactoring although that’s a somewhat bigger project.
Familiarity helps overcome the blank canvas feeling
I’m sure most of us have sat there with a blank canvas or text editor and wondered just where to start on a project and for me Sass was the same.
Reading a lot about Sass has been both helpful and intimidating. The power it can give you is incredible but to be honest I’ve looked at some of what it can do and wondered just how big of a sledgehammer is really needed to crack the CSS nut so for me it’s been incredibly helpful converting a couple of existing projects into Sass because I’ve been familiar with how they all fit together and had a good feel for how I’d re-optimise and refactor before starting.
When I first checked out Sass, one of my big fears was that we’d get a client project that would need “vanilla” CSS refactoring but I’d relish that now. It’s actually quite enjoyable having a big old css file/s open and systematically going through and cutting out old code into smaller Sass modules and re-optimising it as I go.
It’s easy to go over the top but at least I had existing knowledge of how the original CSS was written and therefore how I’d break it down into Sass modules, which selectors go where and then adding in my nested media queries on the elements.
I’m settling into a reasonably simple Sass structure that works for me which compile to my main stylesheet
Most things fit into one of these categories (for example, globals would contain a typography scss file, reset etc) and I just systematically break down an existing site stylesheet/s into smaller and smaller modules which are nice and easy to manage. Naming them sensibly is often one of the trickiest parts!
So if you’re struggling to get your head around Sass and in particular how to structure your files and styles I highly recommend picking apart an existing site.
— pbj (@patrickbjohnson) February 17, 2014
Try not to get to stressed out reading about the massively complex things you can do with Sass and concentrate first on learning some of the basics to get your structure right and with a few useful mixins you can get a long way.
How have you learnt Sass?
I’d love to hear how you’ve been learning Sass or any useful mixins, techniques or useful tips you have. Drop a reply in the comments below to share your knowledge.