How to use Sass in Coda

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-sass

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:

using-sass-partial

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!

Comments

    • Ryan Krug says

      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

      • Ryan Krug says

        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.

  1. luke says

    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

    • Ryan Krug says

      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!

      • luke says

        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.

  2. says

    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.

  3. says

    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!

  4. says

    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?

    • Ryan Krug says

      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.

  5. says

    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.

    • Ryan Krug says

      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 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.

      Thanks!

  6. says

    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!!

  7. Khairul says

    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

  8. says

    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.

  9. says

    #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.

Trackbacks

  1. […] 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>