layout: post title: “Compass – SASS – Boostrap SASS” date: 2014-07-13 21:25:58 +1000 comments: true

categories: [‘SASS’, ‘Bootstrap’, ‘Compass’, ‘Ruby’, ‘Scout’, ‘CSS’]

About a month ago, we decided to use SASS on our side project because we wanted to learn some of the new ways to pre-process CSS. I have used LESS before (which is a Node.js preprocessor) in a work project so it makes sense to use something different for this learning experience. We then boiled down the choices to just two, SASS or Stylus.

We chose SASS and I got down to doing some research. I learned it was built on Ruby, I also learned that a lot of people who use SASS also use Compass as it provides a bunch of mixins that are pretty handy when you come to writing your SASS. We wanted to use Bootstrap but at that point we weren’t aware of the Bootstrap-SASS port, and it was only officially written in CSS and LESS.

I had looked into using SASS alongside the CSS version of Bootstrap but then one day when browsing GitHub, I came across the Bootstrap-SASS official port. Another layer of complexity to this learning experience but sure where’s the fun if you’re not jumping in at the deep end.

I decided that as I was researching how to get set up with Compass, SASS and Bootstrap SASS for the first time, I would document it in a presentation form. This as a) for me because my memory is terrible and b) for my team mates so they wouldn’t have to make the mistakes I did.

I’ve included this presentation in a PDF format below so take a look, have a play about and leave me some feedback so I can make this as useful as possible for others just starting out with these tools too

Compass SASS – Get started with the awesome