Having just finished Dan Cederholm’s excellent Sass For Web Designers I wanted to delve right into Sass myself. So I jumped right into my go to text editor, Coda from Panic, and while it did support the Sass syntax it sadly doesn’t automagically compile the Sass into CSS for you.
So after some digging and some modifying we present a plugin for Coda 2 to automatically compile your handcrafted Sass into CSS for you whenever you save a Sass file in Coda.
To Install
Simply download the Sass.codaplugin.zip file, unzip, and double click the Sass.codaplugin file.
To Use
Using the plugin is as simple as creating a style.scss where you would normally create a style.css. Because Sass is really just CSS with benefits you can just write all your CSS in your scss file and on save it will automagically create your css file for you in the same directory just like so:
Using Partials
We can also support using Sass partials. Editing any Sass partial in Coda will also automatically generate the appropriate CSS. See for yourself:
For other Sass Coda users out there, we hope this plugin can add a little niceity to your day. If you have any difficulty feel free to reply here or submit an issue on Github. Enjoy!
Hi, thank you for the news.
Do you know if the “jump style” feature of coda 2 give you access to the sass’s file ?
Sorry but I believe the “jump style” feature of Coda 2 will still take you to the CSS file.
Hi
Is it possible to implement saving the file via FTP?
Right now it only works locally. You’d have to upload the file from your local directory to your remote. I did look into it a bit and it seems the way Coda/Transmit do remote file editing is to create a temporary directory locally and then watch that file in that directory for uploading to your remote.
Right now the plugin does generate a Sass file in that temporary directory but it doesn’t appear it gets picked up by Coda. I’ll have to look into it a bit more. For now I logged an issue on Github for you to follow up on if needed:
https://github.com/keegnotrub/coda-sass-plugin/issues/1
Thanks!
This is great, Coda doesn’t detect changes in the output file though…..
Hicksdesign offers a great solution to the ‘auto detect and publish’ issues in Coda 2.
From: http://hicksdesign.co.uk/journal/detecting-compiled-css-changes-with-coda-2
Hope this helps.
very nice, thanks for the plugin. Is it possible to use compass?
Compass unfortunately is not supported. An alternative may be to use http://bourbon.io until this issue gets closed with the library this plugin uses:
https://github.com/hcatlin/libsass/issues/82
Thank you for your comment though and hopefully Bourbon can meet you needs!
It doenst create the css file for me. do I have to tell sass to watch the file or something?
It actually does, sorry. It just saved it under the css folder
Good deal, it attempts to automatically find the best appropriate folder to place the CSS file in. It will only place it in the same folder as your scss file in the event it can’t find a dedicated css folder.
Hi,
I am wondering
1) how can I be sure the css complied by Coda is the same as the one complied by say Compass? In other words if I work in a team can team members use different compilers?
2) is there a way to use different source and target folders? Like having a settings area where I can define what what scss to pick up and where to put the css file?
Thanks
Hi Luke,
1) This plugin uses what is called “libsass” to compile the scss files. Libsass has a dedicated test suite to ensure that it is fully compatible with programs like compass. See https://github.com/hcatlin/sass-spec for more information.
2) Not right now. Right now the plugin attempts to intelligently find the correct css folder by looking for a “css” folder in either the path you have your scss files in or in a path that is one more levels up from there. If it doesn’t find a folder it falls back to just creating the css file in the same directory as the scss file. If this isn’t working for you or you’d like to see something different please feel free to submit an issue on this projects github page: https://github.com/keegnotrub/coda-sass-plugin/issues
Thanks for the feedback!
Ryan, Thanks a lot for the answer. I use Foundation and thought I’d place the SCSS library out of the web root so the CSS folder would be in a parallel position to the SCSS folder.
BTW this plugin is a life saver for me. I ran into some major complications trying to follow Zurb’s official documentation to set up Ruby and all.
Great work thanks Ryan.
This is so awesome!! Thank you! Beats telling the terminal to watch my file or having to download a whole separate app to do it.
Hey. I’m wondering if you know how to get the auto-refresh feature of Coda 2 working with SASS. It was a great workflow with CSS but now that I’m editing .scss directly, I have to refresh the preview which means I lose my place on the page and need to scroll back to what I’m looking at.
Does your plugin help with this? Any other ideas will also be greatly appreciated!
Hi Ali,
Would you be able to explain the steps you took? It seems to work for me but I do need to save the file for it to refresh. Are you working with a setup similar to this:
http://www.panic.com/blog/top-20-secrets-of-coda-2#tip2
Thanks for the feedback!
Ryan
I am curious, for what purpose foundation code included in the plugin? I downloaded it for customize foundation file _settings.scss and build foundation with it. I downloaded foundation, edit _settings.scss, and save it. Perhaps, is there any other way to do that, if foundation code already included in the plugin?
Hi Sergey,
In the Foundation projects I’ve used the plugin with I’ve just made an empty _settings.scss file or even _variables.scss and just add to it as I need to modify the variables of either Foundation or my own code.
The docs for Foundation typically have what variables you can modify at the end of each of their components so having an empty file like that works okay for me. See the following as en example:
http://foundation.zurb.com/docs/components/topbar.html#available-scss-variables
Thanks for the feedback and if you have any ideas on how this might be able to be improved upon let me know.
Hi
I don’t know why the plugin doesn’t work anymore. Iused it 2 months ago and it was perfect. Doesn’t work now even after a plugin update.
Thanks for the feedback, I just ran through some tests and it appears to work for me at version 2.0.4 located here:
https://github.com/keegnotrub/coda-sass-plugin/releases/tag/v2.0.4
Could you provide any other information? It does attempt to find the best location for the generated
cssfile. Perhaps it it placing it into a directory you didn’t expect. Any information about your directory setup and how to replicate what you are seeing would be helpful.Thanks!
Hello Ryan!
First of all, thanks for the plugin.
I was using Bootstrap3 and WordPress for making sites and now want to switch to foundation.
I preparad the base template with SASS and it’s all OK but I have 1 problem with the plugin
When I hit the save button, the plugin says “Sass could not be completed” because in /scss/app.scss it can’t import “foundation”
I changed the routes and all, maybe you can help me get this going ? Im a newbie to foundation and sass and I want to learn
Thanks!!
Hi Ariel,
You should just need to use
@import "foundation/foundation";in order to use Foundation. See the following for more information:https://github.com/keegnotrub/coda-sass-plugin/wiki/Included-Sass-Libraries
Best,
Ryan
Hi Ryan,
Awesome plugin! One issue though, it needs to constantly be updated to keep up with SASS changes.
e.g. !global doesn’t work
Hi Khairul,
Thanks for the feedback, the plugin follows the libsass library in terms of its capabilities. I typically try to stay a few days within their releases.
https://github.com/sass/libsass/releases
I believe !global is now supported in libsass – however, I believe just as a keyword for now.
Either I’m a noob or there’s something wrong. Instead of doing the whole Compass etc. I chose to use this plug-in instead. I have latest version of Coda (purchased legally) and I installed the plug-in successfully.
NO matter what I do (restart etc.) I cannot get a .scss file to save the production .css file. 🙁
I tried restarting Coda… nothing. I’m going to restart my whole machine see if it helps.
#IMPORTANT#
i guess I should read the release notes more carefully.
If you bought Coda 2.0x or 2.1x from the App Store, you will NOT get automatic updates. Because my App Store said all apps are up-to-date I just assumed Coda was at latest version, and I was banging my head against the wall wondering why .scss was not auto-populating the .css file in the same folder.
Turns out I was STUCK at an older version… FML. That was an hour well wasted.
So go to http://www.panic.com, download the new version, update your license away from the App Store one, and then install this plug-in at the latest version and you’re fine.
Thanks – great work thanks Ryan