Emmet LiveStyle — the first bi-directional real-time edit tool for CSS, LESS and SCSS

LiveStyle Analyzer

A working prototype of LiveStyle’s conceptual UI for improving preprocessor stylesheet editing workflow. Play around with the code on the left to see how LiveStyle can help you with LESS and SCSS authoring.

Want it in your text editor? LiveStyle Analyzer development will be supported via crowdfunding campaign (more details coming soon).

Suggestions? info@emmet.io

Quickly spot required CSS selectors right in your editor: no matter how deep and complex your nested section, LiveStyle displays its resolved CSS counterpart.
Press Ctrl-O to open quick outline: a compact representation of your stylesheet structure and its resolved CSS. Quickly filter required selectors and pick them with arrow keys.
Click on + icon to display variables that resolves to the same value. For colors, variables with visually similar colors are suggested (marked with ≈ icon).
Move caret on CSS expression to see its computed value.
Mixin output: move caret on mixin invocation to see all matched mixins and their output.
Press Ctrl+Space for variables and mixin completions.