Blog - Writing HTML and CSS faster with SparkUp and Sass
While working on my new website I came across two nifty tools for web development: SparkUp and Sass.
SparkUp lets you write something like
Besides Ctrl+E for expanding, there's Ctrl+N for jumping through the tags that still need extra data. Had the href been empty, then it would've jumped through there too.
Sass is a CSS meta language, which addresses some shortcomings of CSS. It introduces e.g. nested rules and variables. Below is an example Sass stylesheet.
SparkUp lets you write something like
html > head > title{My title} + link[href=style.css] < body > div#container >
div#menu > a.item$[href=/page$]*5 < + div#main
and with a single press of the button you get
<html> <head> <title>My title</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="container"> <div id="menu"> <a href="/page1" class="item1"></a> <a href="/page2" class="item2"></a> <a href="/page3" class="item3"></a> <a href="/page4" class="item4"></a> <a href="/page5" class="item5"></a> </div> <div id="main"></div> </div> </body> </html>
Besides Ctrl+E for expanding, there's Ctrl+N for jumping through the tags that still need extra data. Had the href been empty, then it would've jumped through there too.
Sass is a CSS meta language, which addresses some shortcomings of CSS. It introduces e.g. nested rules and variables. Below is an example Sass stylesheet.
!fg_color = #000 !bg_color = #fff !container_width = 750px !menu_width = 200px !main_width = !container_width - !menu_width #container width = !container_width #menu width = !menu_width - 2px padding-right: 2px a background-color: !fg_color / 2 + #111 &:hover text-decoration: none #main width = !main_width - 2px padding-left: 2px