Blog - Writing HTML and CSS faster with SparkUp and Sass

Added on Friday, 2010-05-14 20:00 CEST in category Programming
While working on my new website I came across two nifty tools for web development: SparkUp and Sass.

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-right2px

    a
      background-color!fg_color / 2 + #111

      &:hover
        text-decorationnone

  #main
    width = !main_width - 2px
    padding-left2px