Stevens Point Graphic & Web Design Services
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.
Simply download the Sass.codaplugin.zip file, unzip, and double click the Sass.codaplugin file.
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:
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!
About Ryan Krug
Ryan has more than five years experience working in computer software development and computer programming. Additionally, Ryan has taught both math and computer science at the high school level as well as web design at the college level as an adjunct professor at the University of Wisconsin-Stevens Point.
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 ?
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:
This is great, Coda doesn’t detect changes in the output file though…..
very nice, thanks for the plugin. Is it possible to use compass?
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.
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?
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.
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!
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?
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:
Thanks for the feedback and if you have any ideas on how this might be able to be improved upon let me know.
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:
Could you provide any other information? It does attempt to find the best location for the generated
css file. 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.
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
Awesome plugin! One issue though, it needs to constantly be updated to keep up with SASS changes.
e.g. !global doesn’t work
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.
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.
[…] can download it here and see gifs of it in action. (I love gifs […]
[…] Sass plugin for Coda gives you the preprocessing power of SASS in the Coda IDE. Everyone is catching the CSS preprocessor craze these days, why not join the fun … but seriously these things are a huge time saver when it comes to working with CSS. […]
Leave a Reply
Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Notify me of new posts by email.
Subscribe to Our Newsletter
Enter your email address to subscribe to our newsletter and receive notifications of new posts by email.
Ryan and Jillian have handled numerous projects for my law firm. They designed my logo and business cards, updated several of my websites, and cleaned up a brochure I drafted for my practice. As a busy lawyer, I appreciate Elbongurk's efficiency, skill and responsiveness. They deliver great value for the money and I have always been completely satisfied with their work.
Andy Brabender, Brabender & Chiang, LLC
Our office is proudly situated in the heart of central Wisconsin. Conveniently located on the corner of Main St and Park Ridge Dr in Stevens Point.
23 Park Ridge Dr., #6, Stevens Point, WI
Start a Project
Interested in working with us? The best way to get in touch is to fill out our contact form.
You could also shoot us an email at firstname.lastname@example.org or give us a call at +1 715 252 9718
Connect with Us
Want to keep up with what we are up to? Follow us across your favorite social media.
© 2014 Elbongurk, LLC, a company born of ♥