Haml & Sass presentation

download Haml & Sass presentation

If you can't read please download the document

Transcript of Haml & Sass presentation

Why code in Ruby / Rails?

I like Java

+

Sign me up!

But I like Ruby better.

Brevity.

import java.util.Map;
import java.util.HashMap;

...
Map hash = new HashMap();

hash.put(1, "one");
hash.put(2, "two");
hash.put(3, "three");

hash = { 1 => "one", 2 => "two", 3 => "three" }

Rails is (mostly) concise.

$ rails blog
$ cd blog
$ ruby script/generate scaffold entry subject:string content:text$ rake db:migrate $ ruby script/server

class Entry < ActiveRecord::Baseend

class EntriesController < ApplicationController # GET /entries # GET /entries.xml def index @entries = Entry.all

respond_to do |format| format.html # index.html.erb format.xml { render :xml => @entries } end end

...

Listing entries

Subject Content

'Are you sure?', :method => :delete %>


HTML in ERb screws everything up.

import java.util.Map;
import java.util.HashMap;

...
Map hash = new HashMap();

hash.put(1, "one");
hash.put(2, "two");
hash.put(3, "three");

Ruby does away with redundant code

What if we could do it here too?

Listing entries



Subject
Content







'Are you sure?', :method => :delete %>







Enter Haml

%h1 Listing entries

Declaring Elements

%table %tr %th Subject %th Content

Nesting Elements

%table %tr %th Subject %th Content - @entries.each do |entry|
%tr
%td&= entry.subject
%td&= entry.content
%td= link_to 'Show', entry
%td= link_to 'Edit', edit_entry_path(entry)

Ruby Code

%p{ :style => "color: green" }= notice

Attributes

%div{ :class => "error", :id => "some_id" } Some Text

can be shortened to

.class#some_id Some Text

divs, classes, and id

Why stop at ERb?

Sass does with CSSwhat Haml does with HTML.

pre background-color: #eee padding: 10px font-size: 11px

No braces! No semicolons!

#errorExplanation width: 400px border: 2px solid red padding: 7px padding-bottom: 12px margin-bottom: 20px background-color: #f0f0f0 h2 text-align: left font-weight: bold
...

Nested Selectors!

$fore: #333$bg: #fff

body background-color: $bg color: $fore

Constants!

@mixin rounded($radius: 10px) border-radius: $radius -moz-border-radius: $radius -webkit-border-radius: $radius

.fieldWithErrors @include rounded(5px) ...

#errorExplanation @include rounded ...

Method-like structures!

Short Demo

Thank you for listening!

my site: http://www.bryanbibat.net