Show Me Some Sass! (and Jade)



“Do you even Jade, bro?” – Travis Neilson

So I’m three weeks into Orange County Code School and things are starting to pick up with building websites. We’ve basically finished learning HTML5 and CSS3, and we’re two days into working on our first project. My project is TravelGram – An Instagram photo browsing website for travelers who want to explore a location before going there.

But that’s a post for another time.

Anyways – so I’ve been browsing some job postings to get an idea of what skills/technologies the job market wants and I’d been seeing Sass and Jade  mentioned in some job postings. I was curious so I decided to try them out in building TravelGram.

Sass is a CSS preprocessing scripting language that is interpreted into CSS. It allows for some really useful things like setting variables (example: setting and using $primary-green is a lot easier than typing #4BBFBB), and also nesting CSS selectors. There are other things like Mixins and Partials that I haven’t tried using yet.

Jade is a templating engine language that allows writing of HTML templates. (Okay, that doesn’t really make sense…). Basically you can write script that is interpreted (is that the right word?) into HTML. Jade allows you to write really clean syntax instead of having to sift through a bunch of and tags. It also Mixins and Extends that I haven’t tried using yet.

I’ve included a picture of of my index.jade and default.scss from TravelGram below.

Screen Shot 2015-11-19 at 9.07.27 PM

So far it’s been awesome using Jade and Sass – it’s really cleaned up the HTML and CSS that I write, which makes it easier for debugging.

It’s late and I gotta sleep, so until next time!

Duncan Leung

Front End Developer at

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!