Created
January 13, 2012 16:37
-
-
Save mnmly/1607386 to your computer and use it in GitHub Desktop.
CoffeeScript + Stylus Stack on jsbin.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>CoffeeScript+Stylus</title> | |
| <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script> | |
| <script src="http://learnboost.github.com/stylus/stylus.js"></script> | |
| <style id="stylus"> | |
| body | |
| font-family helvetica | |
| p | |
| color grey | |
| font-size 30px | |
| font-family sans-serif | |
| font-weight bold | |
| .error | |
| padding 5px 10px | |
| display block | |
| top: 0 | |
| color white | |
| font-family monospace | |
| font-size 12 | |
| background hsla(10, 100%, 60%, 1, 0) | |
| &::before | |
| outline 1px solid | |
| padding-left 3px | |
| padding-right 3px | |
| display inline-block | |
| margin-right 10px | |
| &.cs::before | |
| content 'CoffeeScript' | |
| &.styl | |
| content 'Stylus' | |
| </style> | |
| </head> | |
| <body> | |
| <p>Write CoffeeScript code in the JavaScript panel</p> | |
| <script type="text/coffeescript"> | |
| setTimeout(-> | |
| scripts = document.getElementsByTagName('script') | |
| stylusStyle = document.getElementById('stylus') | |
| try | |
| out = CoffeeScript.compile(scripts[scripts.length-1].innerHTML, {bare: true}) | |
| catch error | |
| e = document.createElement "span" | |
| e.className = 'error cs' | |
| e.innerText = error | |
| document.body.insertBefore e, document.body.firstChild | |
| stylus(stylusStyle.innerHTML.trim()).render (err, str)-> | |
| if err | |
| e = document.createElement "span" | |
| e.style.display = "block" | |
| e.className = 'error styl' | |
| e.innerText = err.name + ": #{err.message}" | |
| console.log(err.name) | |
| document.body.insertBefore e, document.body.firstChild | |
| stylusStyle.innerHTML = str | |
| eval(out) | |
| , 10) | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's on jsbin