Slim and Sass

Slim and Sass

I don’t tend to post many web development posts these days which is a shame. It’s what I do on a daily basis so i’m always learning and picking up tips and tricks. I realised I’ve never spoken about slim or sass here before yet they both make me a happier web developer and save me lots of time, so I decided to dedicate a single blog post to them…

Code is Poetry

The WordPress tagline used to be ‘code is poetry’. To a normal internet user (i’m picturing someone who can’t code or understand code), that probably won’t make much sense… a layman’s definition of code would something along the lines of “code is just a bunch of written commands to make computers do shit”. Although that’s correct, you kind of have to earn the right to say it because if getting something to work is your one and only concern, then you’ll very quickly end up with spaghetti code that neither you, nor anyone else can understand.

This is why I like to stick to ‘default’ versions of everything. I *could* create a wordpress theme from scratch, but it’d most likely end up as spaghetti code. Which would be fine in the immediate future, but not so fine 2 months down the line when I’ve forgotten where everything is and why it’s needed. Documentation would help solve that problem, but ‘poetic’ code and appropriately named files along with documentation is the ideal solution. Slim and Sass make achieving the ‘poetic code’ bit easy. Dare i say it, almost ‘fun’.

Slim

Slim is ‘a lightweight template language whose goal is to reduce the syntax to the essential parts without becoming cryptic’. I was first introduced to slim more than a year ago haven’t looked back since. I find it’s one of the main perks of using the ruby on rails framework (slim / Sass isn’t exclusive to rails however).

Writing plain html now just seems kinda stupid… it’d be like handwriting a letter instead of typing it. As it says on the tin, slim gets rid of all the junk syntax and forces you to indent everything properly (or else your code simply won’t run). That has a few benefits:

  • It makes code instantly readable (great if you’re collaborating on projects)
  • It saves time (it requires less input to get code working)
  • It gets you in to the habit of indenting things instinctively and appreciating the value of ‘poetic code’ as wordpress would call it

It’s gotten to the point now where if I have to edit regular html code, the first thing i’ll do is indent everything correctly. It’s not necessary but it annoys me if it’s not perfectly indented. A pet hate of mine in college was working with the .NET framework and forgetting to close a tag somewhere. It could take a hour or two just to realise a closing tag or slash was missing etc… torture. No such problems using slim because it doesn’t allow any closing tags. It makes complete sense when you start to use it even though it may sound a little alien at first.

slim-html

Sass

Sass is kinda like the Slim equivalent for CSS. It’s a pre-processor for CSS. Sass allows you to do things like add variables and introduce nesting to your code. You can’t do that with regular old CSS. Like Slim, it also gets rid of all the junk and ‘banana skins’ as i call them (missing a closing bracket or semicolon etc..).

In Sass, there are no opening and closing curly brackets to declare something and no semi-colons at the end of a line… here’s a quick comparison of some SCSS -v- CSS code. Beautiful, if you’re in to that sort of thing…

sass -v- css

If you’re managing a large project with hundreds of CSS files, Sass is the way forward… anything less and it will quite simply get out of control and leave you with lots of redundant code.

Bonus Resource

If you’re not a fan of rails or don’t want to invest the time learning it, you can still write slim and sass in your favourite text editor and then just convert it in to standard html / css. How? Using the awesome free tool that is prepros. I do all my development work in windows and it’s by far and away the best free conversion utility out there (for windows).

Now go write some poems.

Leave a Reply