Lego2012
9/26/2016 - 9:58 PM

Haml Overview and Details

Haml Overview and Details

!!! 5
%html{lang: 'en'}
  %head
    %title Output Wrangling
  %body
    %h2<
      %span Remove whitespace in a tag

    %h2
      %span Remove
      %span> whitespace around
      %span a tag

    %h2
      Evaluate multiple lines |
      as one with the pipe character |
!!! 5
%html{lang: 'en'}
  %head
    %title Sample Haml
  %body
    %h1 Archaeopteryx
!!! 5
%html{lang: 'en'}
  %head
    %title Filters
  %body
    :javascript
      $('.dinosaur').on('click', function(e) {
        alert('rawr');
      });
!!! 5
%html{lang: 'en'}
  %head
    %title Content Formatting
  %body
    %p
      Visit a local
      %em Museum
      or a
      %em Science Institute

    %p Visit a local <em>Museum</em> or a <em>Science Institute</em>

    :markdown
      Visit a local *Museum* or a *Science Institute*
!!! 5
%html{lang: 'en'}
  %head
    %title Nesting
  %body
    %h1 Gallimimus

    %h2
      Cretaceous Period

    %h3
      %strong Discovered in 1963
!!! 5
%html{lang: 'en'}
  %head
    %title Adding Ruby
  %body
    - title = 'Stegosaurus'
    %h1= title
!!! 5
%html{lang: 'en'}
  %head
    %title IDs, Classes, Divs
  %body
    %section#content.container

      .stats.container
!!! 5
%html{lang: 'en'}
  %head
    %title Attributes
  %body
    %a{href: 'http://en.wikipedia.org/wiki/Spinosaurus', title: 'Spinosaurus'} Spinosaurus

    %a(href="http://en.wikipedia.org/wiki/Spinosaurus" title="Spinosaurus") Spinosaurus
!!! 5
%html{lang: 'en'}
  %head
    %title Adding Ruby II
  %body
    - title = 'Pterodactyl'
    - if title == 'Stegosaurus'
      %h2 The Greatest Dinosaur Ever
    - else
      %h2 Some Random Dinosaur
!!! 5
%html{lang: 'en'}
  %head
    %title Nesting Errors
  %body
    -# Returns with an error: content is on the same line and nested inside
    %h4 Max Height:
      %em 9m

    -# Returns with an error: inconsistent indentation
    %p
      Present in the same period as the
         %span Tyrannosaurus