I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

Live edit Sass with Takana and instantly view changes (really)

A few days ago there was a buzz about a new Sublime Text package called Takana which claimed to do live editing of Sass. As someone who works on fairly large Sass projects, I was skeptical but decided to give it a short.

Wow, it is fast.

Takana is built upon the blazing fast C/C++ libsass and works in parity with Sublime Text to listen to any changes in your code (not just a save).

This is huge for those who work with Sass and Sublime Text in their workflow. Here is a video exploring how to install and get up and running with some HTML, Sass and the Bourbon library.

This entry was posted in Sublime Text. Bookmark the permalink.

One Response to Live edit Sass with Takana and instantly view changes (really)

  1. Chedie says:

    Hi Wes,

    I’m very new with Takana and SCSS and I’m having a hard time making it work on any of my browsers.

    Here is a breakdown of what I already did:

    1. Had node, sass, takana installed in my Mac via CLI. Ruby was already there.

    2. Installed Sublime Text 2 on Mac.

    3. Installed Takana plugin in Sublime Text 2 via Sublime Package Control.

    4. Via CLI, cd’d to my ‘Sass’ (for testing) directory.

    5. Via CLI, typed takana . (now in my current directory)

    Copied and pasted script snippet into my index.html

    takanaClient.run( {host: ‘localhost:48626’} );

    6. On a separate CLI window, I did sass –watch scss/stylesheet.scss:css/stylesheet.css

    7. So a new .css file is compiled. Yay!

    8. After everything, I then started editing stylesheet.scss in Sublime Text but the changes DON’T happen on my browser. But when I view my stylesheet.css, it shows my file is updated. Something like this:
    body {
    background: white;
    color: blue; }

    section {
    width: 500px; }

    /*# sourceMappingURL=stylesheet.css.map */

    So I’m really having a hard time trying to figure out how come my changes aren’t happening instantaneously as it should. 🙁

    Can you help me? Thank you.

Leave a Reply

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