Github repo: https://github.com/joshuatz/sass-embed
Purpose:
I needed to embed SASS/SCSS side-by-side into a blog post as a demonstration of some code, and realized that it was extremely difficult to find any “live” SASS-to-CSS playgrounds that supported embedding into another website. There are code playgrounds that support SASS conversion and embeds, but the conversion is usually done server side when the playground is saved, which is incompatible with an anonymous iframe embed. For examples of those types of solutions, see the section on alternative (easier) solutions.
This project is the end result of roughly a day and half of work, to see how much functionality I could shoehorn into a single-page that could be embedded as an iframe.
What it is:
The whole point of this project is being able to embed it into posts like this, so why don’t I just show you! Here is a live embedded demo:
As you can see, above is a two-pane embed, showing SCSS input side-by-side with CSS output. What is unique about this though, is a few things:
- It is using in-browser SASS-to-CSS conversion
- It is a live playground
- With “autorun” on, if you type in the left panel and then pause for a second or two, it will automatically be converted
- You can manually trigger conversion by clicking the “convert” button
- You can toggle indented syntax (SCSS vs indented SASS)
- You can adjust the width of each panel by sliding the divider in the middle
- Even though the playground is embedded within an iframe, you can modify the contents from the parent window by sending messages. For example, try clicking here and looking at the above embed.
Embed-Gen
Since the embed is a simple single-page application without any sort of database, in order to preload SASS and various options, you have to either use special querystring parameters (part of the URL of the embed), inline tags placed into the index.html file, and/or postMessage events.
Embed-Gen is a simple tool that I built to simplify crafting the necessary embed codes to do all this. You find it hosted up here.
How it works:
For how it works, and more details on how to use it, please refer to the readme file in the project repo.
Alternative (easier) Solutions:
If you just want to embed a side-by-side display of SASS input and CSS output, there are some easier solutions. One of the easiest is to use an embeddable code playground tool, like JSFiddle, use the SASS input panel, and then force the editor to show the generated CSS. My first attempt at this used Javascript, which you check out here.
This is already pretty simple, but I was able to simplify it even further thanks to this tweet from Matt Stow:
There’s an even simpler, faster way of making a Sassmeister clone in @CodePen: CSS! pic.twitter.com/lg6DpAvIFR
— Matt Stow ✨🦄 (@stowball) April 20, 2019
That snippet of CSS is not only a more simple solution than the JS solution, but it also easily works across different code playgrounds (with a slight tweak), since most tend to inject the generated CSS through an inline <style></style> tag, which is what this snippet relies on to work.
Here are examples using this method, which you can easily clone and paste your SASS into before generating an embed code:
And here is a nice demo:
Or, if you don’t need the SASS/SCSS input side-by-side and are OK simply toggling between, create a CodePen with nothing but SASS input and un-select the result pane when generating the embed code. Then the embed will look like the below and you can simply toggle between the input SASS and the generated CSS by clicking the “View Compiled” button in the bottom right:
If you don’t need to embed at all, you can use one of these live Sass-to-CSS playground:
