We should really work on the header.
We could pack some useful details in there about the project and possibly make it way more attractive in the process. Thoughts?

should we consider making a SASS.js logo?

Update

subtasks:

• redesign the header, the options and filesystem panel
• make the editors takes as much space as their parents can provide
• make the CSS editor (the output) read only
• custom error highlighting for stdin
• custom error highlighting for filesystem (on errors originated from the filesystem, open the filesystem ]tab, open the erroneous file in the filesystem editor and highlight the error)
• remove edit buttons in filesystem, clicking on a file's block triggers the edit action
• clean up messy parts of the codebase (modularize it with webpack)
• prepare something better for the text below the header (descriptions, links, call for contribution etc)

We should use dns.js.org and get the sass.js.org sub domain for this repo. It's much better than http://medialize.github.io/playground.sass.js/

I've already set something like this up in codemagic so it should be quite easy to port

nice work! this is ace thing turned out much nicer than anticipated :)

1. I think "demoting" the SourceMaps into their own panel (like Options, Filesystem - hidden by default) is ok, since this is not A-grade information.
2. when I put together the options block, I thought I'd visualize it like it was JSON with editable values. I don't think this was a very good idea to begin with. In this context it looks confusing…
3. It is possible that the tabs at the top left are not obvious enough
4. that note "this fun was had" should not go in the head, in fact I don't need it in there at all. If anyone's name should go anywhere on that page, it's your's.
5. when two or three panels are shown, input/output may be better shown in a single colum?

again, cool stuff!

Steps to reproduce:

1-Open desktop Google Chrome
2-Go to url https://sass.js.org/
3-Click Gear Icon (settings)
4-Change Indent to Tab

5-Close Settings (i.e. return to base workspace with 2 large textareas)

6-Click button Convert (this will process default test example)

7-Fail ! Indent uses 3 spaces (3 spaces, not expected Tab).

Likely reason

I looked at source code of page and something funny became apparent:

<select id="option-indent">
            <option value="  " selected="selected">2 Spaces</option>
            <option value="    ">4 Spaces</option>
            <option value="   ">Tab</option>
          </select>

last options value is set to 3 spaces. And! When I changed it via Chrome Developer Tools to a proper Tab character (i.e. ' ') and reselected it, problem was temporary fixed.

It would be nice if there were a way to actually create subfolders in the "file system" view in order to do simple tests on how SASS compilers handle relative paths in @import directives.

For more information on how to convert SCSS and SASS in the browser using emscripted & libsass see the Sass.js repository.

should be changed to something like:

Sass.js v0.7.0-beta.1, libsass v3.2.0-beta.5, emscripten v1.30.2

sass.js 0.7.0 will include dist/versions.json providing git tag/branch name and commits the build was based on.

we need to remove the placeholder description I've had there:

This is sass.js' playground, temporary hosted under my github profile until it's mature enough to be moved to the proper organization.

And add a proper one