Troubles with SASS and Remote Development

16 May 2013

Troubles with SASS and Remote Development

I’ve recently started using Syntactically Awesome Stylesheets (SASS) to write more dynamic (and awesome) CSS on my projects, but quickly ran into an issue. As anyone who has ever worked with SASS knows, you have to compile the code into normal Cascading Style Sheets for any browsers to read it. That wouldn’t be too bad if I could set up Compass (a program to automatically compile SASS when you save the file) on my remote server. Unfortunately, I can not. So, just like everyone else that doesn’t like to develop locally, I have to write my SASS locally and upload it remotely every time I want to test or commit the code.

That doesn’t sound right, does it? With all of the amazing things computers, and people, do.. there’s gotta be someone out there that has come up with a solution for this!! It’s been bugging me off and on for a few weeks now, and finally I had had enough. I dug through all the possible solutions, and google’d every keyword I could think of, without much to show for it. My first thought was to use something like or DropBox to grab the updated files and put them on my server, but the sync time was way too slow to be useful and in most cases it will only put the synced files in a pre-designated directory, so that idea was out.

I thought I had found the holy grail when I ran across AppleScripts (something I’d run across in the past, but never really studied until now). Along with Automator, a rarely used program that ships with OSX, you can write macros for certain events on the Mac. At a quick glance, I found the ‘Folder Actions’ event in Automator which could run an upload sequence from Transmit when a new file was added to a folder. AWESOME! Now I can just set the compile location for SASS to a folder running a Folder Action for auto upload and be done, right?

Wrong. It would work the first time the .scss file compiled, because it would create that .css file inside the watched folder, but any update to the .scss after that would update/overwrite the already compiled .css file and Automator can only detect a new file being added to the system. ARGH!!

Some more digging turned out to be more fruitful, though. There is a mac app in the App Store called “WatchFolder”, and it picks up where Automator and AppleScript left off. It detects every file update/modification/creation/deletion in a specified folder, and will mirror those files in another folder. This means you can mirror your downloads folder to an external harddrive, or your project files to a network drive, or in my case the compiled SASS folder to the FTP server I mounted with Transmit. Essentially the workflow is now SASS compiles to CSS inside a watched folder, which then copies the modified files to a mounted FTP server directory on my computer that uploads the files to the server. It is very round-a-bout, I know. Not to mention the total cost for the apps in the APP Store (Transmit: $33.99 + FolderWatch $11.99 = $45.98) just to accomplish what I consider to be a simple task.

If you know of another solution to this, PLEASE let me know in the comments below (:

Leave a Reply

Your email address will not be published. Required fields are marked *