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.

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

  2. James says:

    I’m thoroughly confused. Your HTML links to a style.css, but when you print the contents of your working directory to the termina (at 2:59)l, there is no such file in the directory. Only style.scss. Yet, you open style.scss in your editor and everything works. As baffled as I am, I tried to replicate your set up, but to no avail. I can’t get this gimmick to work.

Leave a Reply

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