Sassmeister is a pretty cool app for looking at Sass code and the compiled output of that Sass at the same time.
CodePen also can compile your Sass, of course, but we don't offer a side-by-side view for looking at authored code and compiled code at the same time. It can be done though! I saw a Pen by Matt Stow who used some simple HTML and CSS trickery to do it.
The idea is that we inject the compiled Sass into the <head> as a <style> tag to render your code. With some fancy styles, you can actually display that code. Essentially you force those elements to be display: block; show they show then style them up. That way, the preview area becomes a display area for your compiled Sass, and it updates as you update your Sass code.
See the Pen
Sassmeister clone by Matt Stow (@stowball)
on CodePen.
Very clever, especially in that it requires no JavaScript at all to do the trick. But I thought hey, maybe I'll try to take it one step further. Rather than display the <style> block from the head, I'll watch it for changes with JavaScript then move the contents over to a <pre> tag for display. That way I can syntax highlight it and use a bit less CSS trickery.
Since CodePen often injects CSS changes as you write CSS (including Sass) rather than re-rendering the whole preview, I set up a MutationObserver to watch the <head> for changes, then do the little move-and-highlight shuffle when there has been changes.
There we are:
See the Pen
Sassmeister clone by Chris Coyier (@chriscoyier)
on CodePen.
The post View Your Authored Sass and Compiled Sass Side-by-Side appeared first on CodePen Blog.