Preprocessors- Session3

Filters

Haml provides a handful of filters, allowing different types of input to be used inside of Haml. Filters are identified with a colon followed by the name of the filter, :markdown for example, with all of the content to be filtered nested underneath.

Common Filters

Below are some of the more common filters, with the more popular ones of the group being :css and :javascript.

• :cdata
• :coffee
• :css
• :erb
• :escaped
• :javascript
• :less
• :markdown
• :maruku
• :plain
• :preserve
• :ruby
• :sass
• :scss
• :textile

Javascript Filter

HAML

:javascript
  $('button').on('click', function(event) {
    $('p').hide('slow');
  });

COMPILED HTML

<script>
  $('button').on('click', function(event) {
    $('p').hide('slow');
  }); 
</script>

CSS & Sass Filters

HAML

CSS & SASS FILTERS:css
  .container {
    margin: 0 auto;
    width: 960px;
  }

:sass
  .container
    margin: 0 auto
    width: 960px

COMPILED HTML

CSS & SASS FILTERS<style>
  .container {
    margin: 0 auto;
    width: 960px;
  }
</style>

Ruby Interpolation

As previously mentioned Haml can evaluate Ruby, and there may occasionally be times where Ruby needs to be evaluated inside of plain text. In this event Ruby needs to be interpolated, accomplished by wrapping the necessary Ruby code inside #{}.

Below is an example of Ruby being interpolated as part of a class name.

HAML

%div{:class => "student-#{@student.name}"}

COMPILED HTML

<div class="student-shay">