Blog

Haml and SASS are meta-langauges that compile into HTML and CSS, respectively. They let you write code that is leaner, more readable, and more easily changed.

We use Haml and SASS for every website we make (even this one!), and will probably never go back.

However, Haml and SASS are typically pretty tough to use for websites that are static or hosted on a server that you don't fully control. This is because they are written in Ruby and designed to be used with Ruby on Rails.

But we've done all the plumbing to make Haml and SASS work automatically on Vae. All you need to do is upload a .haml or .sass file and hit it in your browser. We will automatically compile it to HTML or CSS and cache the compiled version.

I think we are the first shared webhost to do something like this.

Check out how cool Haml is. This code:

#shows
  .show
    %a{ :href => "/show" } See the show

Becomes this ...

<div id="shows">
  <div class="show">
    <a href="/show">See the show</a>
  </div>
</div>

Haml cuts out all of the extra typing and brainpower associated with closing tags and angle brackets everywhere. It also uses CSS-style identifiers for id and class. For more details, read the documentation.

SASS applies the same principle to stylesheets. This:

#main
  :width 97%
  p, div
    :font-size 2em
    a
      :font-weight bold
  pre
    :font-size 3em

Becomes this:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Curly brackets are gone, and nesting style rules is now a matter of just using indentation! For more details, read the SASS documentation.

Of course, you can fully use VaeML tags inside Haml. They work just like HTML tags.