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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Haml and Sass Introduction

Similaire à Haml and Sass Introduction (20)

Dernier

Dernier (20)

Haml and Sass Introduction