If you haven’t tried Sass yet, do so now! – Sass Website
If you have tried it, then I’m sure you know how amazing it is.

However the one annoyance I’ve always found is the moderate distraction it causes to setup when you’re creating a development environment. You either have to manually type terminal commands or use software/apps like CodeKit / Grunt etc.

For that reason I’ve created this simple app/automation process. You simply drag your project folder onto the app icon and it starts watching your project for changes to the scss folder and immediately writes them to the css folder.

Here’s a quick video to show how in under 30 seconds wecan setup a very basic file structure and use sass that automatically compiles on its own:

So what’s happening in that video? :

  1. Create project folder, with 2 folders inside: scss and css.
  2. Drag project folder to sublime text.
  3. Create index.html with some basic html
  4. Create a style.scss (in the scss folder) & write some basic css/sass
  5. Drag project folder on simpulSass app icon
  6. Terminal opens and now automatically compiles the sass files into css files and continues to watch for any further changes
  7. And link up style sheet in head of index.html (This step could have been done earlier, but doesn’t matter).

What do you need to do?

If you’ve already got a project setup with the scss folder at the root of your project, nothing.. just drag it onto the simpulSass app icon!

Prerequisite’s of simpulSass:
– Mac Only (No windows support)
– You need to have the command line version of sass already installed. (In terminal just type: gem install sass More info here.)
– You project folder must contain a folder name scss
– Your scss folder must be a direct child of the project folder you drag onto the app.
– Correct: /project/scss/
– Incorrect: /projects/assets/scss/