Don’t Make Me Write HTML

No one likes writing -- or reading -- HTML. Thankfully there are tools like Markdown, HAML and SaSS to make your hypertext life easier.

Of course, HAML really shines when you mix it with Ruby and a framework such as Rails or Merb. You can interpret and display Ruby code with the equal sign (=) operator (equivalent to <%= in ERB, and embed statements and blocks with the minus sign (-). This code…

- name = 'Zeppo'
%p= name

- names = %w( Groucho Chico Harpo )
- names.each do |n|
  %p
    = n.upcase

… produces:

<p>
  Zeppo
</p>

<p>
  GROUCHO
</p>
<p>
  CHICO
</p>
<p>
  HARPO
</p>

Like an element, a block of code is defined with active white space.

Getting SaSS-y

Like HAML, SaSS provides an outline-like syntax to define styles. For comparsion, SaSS is on the left, and traditional CSS is at right. Again, you can manually produce the CSS from its shorthand with the sass command.

!listing_color = white

#main
  :font-size 1.2em
  pre.list
    :color !listing_color
    :background black

  p
    :font
      :family Tahoma
      :size larger
      :weight bold

#main {
  font-size: 1.2em; }
  #main pre.list {
    color: white;
    background: black; }
  #main p {
    font-family: Tahoma;
    font-size: larger;
    font-weight: bold; }

Marching from top to bottom:

  • You can create constants with the exclamation point (!). You can then use those constants throughout your styles. You can also perform arithmetic, concatenation, and other operations on the constants.
  • To create a style, name the kind of element, an ID, or class as you would in CSS, then indent and list the attributes and values. Here, I’ve used one form of syntax, :font-size 1.2em. If you prefer, you can also use the CSS-like syntax, font-size: 1.2em, but omit the trailing semicolon (;).
  • To create a style to affect a nested element, simply indent the element within another and define your attributes. The example here defines styles for a paragraph of class list that occurs within the div main. Look at the CSS SaSS generates. The stylesheet is still a flat-file, but SaSS uses indentation to reinforce the relationship between the two elements.
  • To conserve typing, SaSS lets you group like attributes in a namespace. For example, the namespace font contains family, size, and weight. You can use a namespace for background, border, and margin, among others.

Beyond the lack of structure in a stylesheet, another problem is repetition. Styles often share the same attribute or set of attributes, yet rather than write something akin to …

element.class1, element.class2, element.class3 {
  attributeX: valueX;
  attributeY: valueY;
}

… you commonly see …

element.class1 {
  attributeX: valueX;
  attributeY: valueY;
}

element.class2 {
  attributeX: valueX;
  attributeY: valueY;
}

 element.class3 {
  attributeX: valueX;
  attributeY: valueY;
}

Arguably, the latter form is easier to comprehend, and it seems as styles permute during the lifetime of a project, definitions proliferate.

The SaSS mixin something like a macro. You can name a mixin, define its attributes and styles, and then include the mixin in any other style, where it “expands” in-place.

For example, let’s say you want to define a typeface style for all headings (section, table, captions, and so on). You can create a mixin and include it wherever its needed. This snippet of SaSS…

=heading-typeface
  :font
    :family Tahoma
    :weight bold
    :style italic

h1, h2, h3
  +heading-typeface

… produces:

h1, h2, h3 {
  font-family: Tahoma;
  font-weight: bold;
  font-style: italic; }

Slick! No more hunting down errant exceptions.

Better Than Sliced Bread

There is even more to like about HAML and SaSS, so read the project website, which has a tutorial and expansive documentation with examples.

If you are developing in Rails, you can download the gem and run the generator to embed HAML in your project in moments. HAML template files are named .html.haml; SaSS files are named .sass and typically are placed in public/stylesheets/sass. When your application runs, HAML generates the corresponding CSS for each SaSS file and places the resulting stylesheet in public/stylesheets. Simply reference the CSS file with =stylesheet_link_tag in your layout.

Now, what will you do with all those saved keystrokes?

Fatal error: Call to undefined function aa_author_bios() in /opt/apache/dms/b2b/linux-mag.com/site/www/htdocs/wp-content/themes/linuxmag/single.php on line 62