Changing the version of SASS in LiveReload

LiveReload is great a great tool for any web developer. One of the most useful of it's features is the ability to compile SASS on save. Unfortunately the version of SASS that is included in LiveReload isn't the latest one and it just so happened that was the version I needed (3.2 alpha). Long story short, I updated the version of SASS that LiveReload uses on my machine. I'm not sure if it will break anything but backup your LiveReload App just in case. If you ever update LiveReload you will need to redo the process (unless the app is updated with the ability to choose the version of SASS). If you don't already use LiveReload or SASS then I would recommend taking a look into them.

Step by Step

First install the latest version of SASS on your machine using terminal

1>sudo gem install sass --pre 

Check that it has worked and see what the latest version is

1>sass --version Sass 3.2.0.alpha.261 (Bleeding Edge) 

Now to find where the new files are:

1>gem environment ... GEM PATHS: - /Library/Ruby/Gems/1.8 - /Users/usernameHere/.gem/ruby/1.8 ... 

This is where the sass gem is installed so lets get there (add /gems to the end so we end up in the gems directory)

1>cd /Library/Ruby/Gems/1.8/gems >ls 

typing 'ls' should now show a list off all gems.. the one we want is sass-3.2.0.alpha.xxx and in its folder /lib (start typing and use tab to auto complete if your lazy). Open the folder in Finder with open .

1>cd sass-3.2.0.alpha.xxx/lib >open . 

Here are your new sass files. Keep this window open for now.

Find the LiveReload app in your Applications folder then right/ctrl click and select 'View package contents'. Navigate the folder structure until you are in the location below:

1Contents > Resources > SASS.lrplugin > lib > sass > lib 

Copy sass and sass.rb to your desktop or somewhere else safe and rename them to sass.old and sass.rb.old.

From the first finder window where you have the new versions drag and replace the sass files. It may need to authenticate and now you have the latest sass in live reload. Feel free to copy your .old files back in (authenticate again)

When LiveReload runs the SASS compiler it will be using is now the version you have copied across. This will give you better @media and @content use.

Other posts

Tagged with