Haml & Sass presentation

import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); hash.put(1, "one" ); hash.put(2, "two" ); hash.put(3, "three" );

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

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

class Entry < ActiveRecord :: Base end

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 ...

< h1 > Listing entries </ h1 > < table > < tr > < th > Subject </ th > < th > Content </ th > </ tr > <% @entries .each do | entry | %> < tr > < td > <%= h entry.subject %> </ td > < td > <%= h entry.content %> </ td > < td > <%= link_to ' Show ', entry %> </ td > < td > <%= link_to ' Edit ', edit_entry_path(entry) %> </ td > < td > <%= link_to ' Destroy ', entry, :confirm => ' Are you sure? ' , :method => :delete %> </ td > </ tr > <% end %> </ table > < br /> <%= link_to ' New entry ', new_entry_path %>

HTML in ERb screws everything up.

import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); 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? < h1 > Listing entries </h1> < table > < tr > < th > Subject </th> < th > Content </th> </tr> <% @entries.each do |entry| %> < tr > < td ><% =h entry.subject %></td> < td ><% =h entry.content %></td> < td ><% = link_to 'Show', entry %></td> < td ><% = link_to 'Edit', edit_entry_path(entry) %></td> < td ><% = link_to 'Destroy', entry, :confirm => 'Are you sure?', :method => :delete %></td> </tr> <% end %> </table> < br /> <% = link_to 'New entry', new_entry_path %>

% 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

Sass does with CSS what 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!

Thank you for listening! my site: http://www.bryanbibat.net

Haml & Sass presentation

More Related Content

What's hot

What's hot (17)

Similar to Haml & Sass presentation

Similar to Haml & Sass presentation (20)

More from bryanbibat

More from bryanbibat (20)

Recently uploaded

Recently uploaded (20)

Haml & Sass presentation