Haml and Sass Introduction

Haml and Sass
An Introduction

What?
• Templating languages
• Haml generates html
• Sass generates css
• Can be used independently
• They help front-end
development suck less

Why?

• Markup should be beautiful
• Markup should be DRY
• Markup should be well indented

Basics

• White space deﬁned structure
• Self closing tags

Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Ethan’s Awesome Webpage
</title>
</head>
</html

!!!
%html
%head
%title Ethan’s Awesome Webpage

Example
<div class=”latin” id=”content”>
lorem ipsum
</div>

%div.latin#content lorem ipsum

.latin#content lorem ipsum

Example
.posts <div class=”posts”>
-@posts.count.each do |post| <% @posts.count.each do |post|%>
%span.title= post.name <span class=”title”>
%p= post.text <%= post.name %>
</span>
<p>
<%= post.text %>
</p>
<% end %>
</div>

Basics
.content
padding: 5px
margin-right: auto
margin-left: auto
img
border: 1px solid black

Nesting
.h1 .h1 {
font: font-weight: bold;
weight: bold font-size: 1.2em; }
size: 1.2em .h1 img {
img margin: 5px; }
margin: 5px

Variables
!margin = 10px h1 {
!padding = 5px padding: 5px;
!green = DarkGreen margin: 10px;
!blue = DarkBlue color: DarkGreen; }

h1 h2 {
padding = !padding padding: 5px;
margin = !margin margin: 10px;
color = !green color: DarkBlue; }
h2
padding = !padding
margin = !margin
color = !blue

Mixins
#data th {
=table-scaffolding(!margin) text-align: center;
th font-weight: bold;
text-align: center }
font-weight: bold #data td, #data th {
td, th padding: 2px;
padding: 2px margin: 10px;
margin = !margin }
#data
+table-scaffolding(10px)

Cool projects using
Haml/Sass

• StaticMatic - Adds the joy of dynamic websites to
static ones

• DynamicMatic - Adds a Sinatra back-end to
StaticMatic

Resources

• haml-lang.com
• sass-lang.com
• html2haml / css2sass
• Live rendering http://rendera.heroku.com/

Haml and Sass Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Haml and Sass Introduction

Similar to Haml and Sass Introduction (20)

Recently uploaded

Recently uploaded (20)

Haml and Sass Introduction