• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Elbongurk - Graphic Design, Branding, & Marketing || Stevens Point, WI

Stevens Point Design & Branding Services

  • Work
  • About
  • Contact
  • Blog

How to use Sass in Coda

November 18, 2013 by Elbongurk 32 Comments

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!

Filed Under: Nerd

About Elbongurk

We’re a tiny design firm located in Stevens Point, Wisconsin. Our focus is creating memorable brands, industrious illustration work, and, of course, polished print projects.

Emails Newsletter

Receive updates and hear what's recently been going on!

No charge. Unsubscribe anytime.

Reader Interactions

Comments

  1. tendance_web says

    November 30, 2013 at 9:25 pm

    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 ?

    Reply
    • Ryan Krug says

      December 1, 2013 at 9:04 pm

      Sorry but I believe the “jump style” feature of Coda 2 will still take you to the CSS file.

      Reply
  2. Vitaly says

    January 28, 2014 at 9:10 am

    Hi
    Is it possible to implement saving the file via FTP?

    Reply
    • Ryan Krug says

      January 28, 2014 at 12:02 pm

      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

      Reply
      • Vitaly says

        January 29, 2014 at 2:02 am

        Thanks!

        Reply
  3. Drew says

    February 1, 2014 at 8:38 pm

    This is great, Coda doesn’t detect changes in the output file though…..

    Reply
  4. Stephen Blignault says

    February 2, 2014 at 11:26 pm

    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

    Simple workaround: Right-click your CSS file choose “Open with…” and then “Coda 2.app”. From now on, Coda will detect the compiled CSS and mark it for publishing. Huzzah!

    Hope this helps.

    Reply
  5. Pascal says

    February 19, 2014 at 3:45 pm

    very nice, thanks for the plugin. Is it possible to use compass?

    Reply
    • Ryan Krug says

      February 20, 2014 at 3:53 am

      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!

      Reply
  6. Anzor says

    February 23, 2014 at 3:01 pm

    It doenst create the css file for me. do I have to tell sass to watch the file or something?

    Reply
    • Anzor says

      February 23, 2014 at 3:18 pm

      It actually does, sorry. It just saved it under the css folder

      Reply
      • Ryan Krug says

        February 23, 2014 at 3:19 pm

        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.

        Reply
  7. luke says

    February 24, 2014 at 8:25 pm

    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

    Reply
    • Ryan Krug says

      February 24, 2014 at 8:42 pm

      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!

      Reply
      • luke says

        March 31, 2014 at 8:31 pm

        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.

        Reply
  8. Nicholas Cole says

    February 25, 2014 at 3:26 am

    Great work thanks Ryan.

    Reply
  9. Lisa says

    March 6, 2014 at 7:14 pm

    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.

    Reply
  10. Ali Dark says

    April 12, 2014 at 8:36 pm

    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!

    Reply
    • Ryan Krug says

      April 14, 2014 at 2:14 pm

      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

      Reply
  11. Sergey Estrin says

    April 19, 2014 at 6:50 am

    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?

    Reply
    • Ryan Krug says

      April 19, 2014 at 7:28 am

      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.

      Reply
  12. ecreatures says

    May 14, 2014 at 9:10 am

    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.

    Reply
    • Ryan Krug says

      May 14, 2014 at 1:50 pm

      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!

      Reply
  13. Ariel says

    June 16, 2014 at 12:55 pm

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

    Reply
    • Ryan Krug says

      June 16, 2014 at 12:59 pm

      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

      Reply
  14. Khairul says

    September 30, 2014 at 1:03 am

    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

    Reply
    • Ryan Krug says

      October 31, 2014 at 7:39 am

      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.

      Reply
  15. Jeff Kee says

    October 28, 2014 at 10:12 pm

    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.

    Reply
  16. Jeff Kee says

    October 28, 2014 at 10:37 pm

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

    Reply
  17. Chris Newbie says

    October 25, 2016 at 7:46 am

    Thanks – great work thanks Ryan

    Reply

Trackbacks

  1. Coda 2 Plugin That Compiles Sass For you - Lisa Cartrette says:
    March 7, 2014 at 2:52 am

    […] can download it here and see gifs of it in action. (I love gifs […]

    Reply
  2. Coda - Sass plugin - [ UIBuzz.com ] says:
    May 16, 2014 at 12:33 pm

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

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Email Newsletter

Sign up to receive updates and to hear what's recently been going on!

Let’s Connect

  • Email
  • Facebook
  • Twitter

Recent Posts

Converting Sass to CSS

Creating a Simple, Responsive Rotating Banner

Using Modernizr to Implement the HTML5 Shiv

Using Inspect Element in Safari

Footer

Our Location

We’re a tiny design firm located in Stevens Point, Wisconsin.

3116 Vine Street
Stevens Point, WI 54481

715.966.0379

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 hello@elbongurk.com

Let’s Connect

  • Email
  • Facebook
  • Twitter

© 2023 Elbongurk, LLC, a company born of ♥