Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DT...
<h1>Hello, World!</h1>   %h1 Hello, World!
<p>
                        %p
  Hello,
                          Hello,
  World!
                          World!
</p>
<u...
<a href=”…”>Haml</a>   %a{:href => ’…’} Haml

                       %div{:class=>‘block’} …
<div class=”block”>
  …      ...
<%= link_to … %>      = link_to …

<p>
  <%=h user.name %>   %p&= user.name
</p>

<li title=”<%=
user.name %>”>        %li...
<% users.each do |u| %>
                        - users.each do |u|
<li><%=h u.name %></li>
                          %li&...
- %w(foo bar).each do |s|
  = s
- end

Syntax error on line 3: You don't
need to use "- end" in Haml. Use
indentation inst...
<%= %w(foo bar).map do |s| %>
  <% s.upcase %>
<% end.join(‘<br/>’) %>



= %w(foo bar).map do |s|
  - s.upcase
- end.join...
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0   !!!
Transitional//EN" …>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML       !!!...
!!! XML
!!! 1.1
%html{:xmlns => 'http://www.w3.org/1999/xhtml'}
  %head
    %title&= @title
  %body
    - if @content_for_...
.content {
                       .content
  margin: 1em;
                         margin: 1em
}
.content h1 {
           ...
!base_color = red
!base_margin = 3em

h3
  color: white
  background-color = !base_color
  margin-left = !base_margin
!base_color = red
!base_margin = 3em

h4
  color = !base_color - #666
  background-color: white
  margin-left = !base_marg...
=round-border
  border-radius: 16px
  -webkit-border-radius: 16px
  -moz-border-radius: 16px

.navigation a
  +round-borde...
=clearfix
  display: inline-block
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibili...
=sexy-border(!color, !width = 1in)
  border:
    color = !color
    width = !width
    style: dashed

p
    +sexy-border("...
$ gem install haml
$ haml --rails path/to/rails_app




$ vim app/views/hello/index.html.haml
$ vim public/stylesheets/sass/style.sass
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Haml and Sass: Solution for you who get tired of ugly markup
Prochain SlideShare
Chargement dans…5
×

Haml and Sass: Solution for you who get tired of ugly markup

5 498 vues

Publié le

in RubyKaigi2009

Publié dans : Technologie, Business
  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/Wm3lh ◀ ◀ ◀ ◀
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/Wm3lh ◀ ◀ ◀ ◀
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Haml and Sass: Solution for you who get tired of ugly markup

  1. 1. <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'>   <head>     <title><%=h @title %></title>   </head>   <body>     <% if @content_for_nav %>       <div class='navigation'>         <%= yield :nav %>       </div>     <% end %>     <div class='content'>       <%= yield %>     </div>   </body> </html>
  2. 2. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  3. 3. <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'>   <head>     <title><%=h @title %></title>   </head>   <body>     <% if @content_for_nav %>       <div class='navigation'>         <%= yield :nav %> !!! XML       </div> !!! 1.1     <% end %> %html{:xmlns => 'http://www.w3.org/1999/xhtml'}     <div class='content'>   %head       <%= yield %>     %title&= @title     </div>   %body   </body>     - if @content_for_nav </html>       .navigation         = yield :nav     .content       = yield 432 characters 192 characters
  4. 4. <h1>Hello, World!</h1> %h1 Hello, World!
  5. 5. <p> %p Hello, Hello, World! World! </p> <ul> <li>alpha %ul <ul> %li <li>bravo</li> alpha </ul> %ul </li> %li bravo <li>charly</li> %li charly </ul>
  6. 6. <a href=”…”>Haml</a> %a{:href => ’…’} Haml %div{:class=>‘block’} … <div class=”block”> … %div.block … </div> .block … <div id=”header”> … #header … </div>
  7. 7. <%= link_to … %> = link_to … <p> <%=h user.name %> %p&= user.name </p> <li title=”<%= user.name %>”> %li{:title=>user.name} … … </li>
  8. 8. <% users.each do |u| %> - users.each do |u| <li><%=h u.name %></li> %li&= u.name <% end %> <% if @user.admin? %> - if @user.admin? <%= admin_menu %> = admin_menu <% else %> - else <%= common_menu %> = common_menu <% end %>
  9. 9. - %w(foo bar).each do |s| = s - end Syntax error on line 3: You don't need to use "- end" in Haml. Use indentation instead: - if foo? %strong Foo! - else Not foo.
  10. 10. <%= %w(foo bar).map do |s| %> <% s.upcase %> <% end.join(‘<br/>’) %> = %w(foo bar).map do |s| - s.upcase - end.join(‘<br/>’)
  11. 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 !!! Transitional//EN" …> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML !!! 1.1 1.1//EN" …> <?xml version='1.0' !!! XML encoding='utf-8' ?>
  12. 12. !!! XML !!! 1.1 %html{:xmlns => 'http://www.w3.org/1999/xhtml'}   %head     %title&= @title   %body     - if @content_for_nav       .navigation         = yield :nav     .content       = yield
  13. 13. .content { .content margin: 1em; margin: 1em } .content h1 { h1 font-size: 3em; font-size: 1em } .content h1 strong { strong color: red; color: red }
  14. 14. !base_color = red !base_margin = 3em h3 color: white background-color = !base_color margin-left = !base_margin
  15. 15. !base_color = red !base_margin = 3em h4 color = !base_color - #666 background-color: white margin-left = !base_margin + 1em
  16. 16. =round-border border-radius: 16px -webkit-border-radius: 16px -moz-border-radius: 16px .navigation a +round-border .navigation a { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; }
  17. 17. =clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px ul.menu +clearfix li float: left
  18. 18. =sexy-border(!color, !width = 1in) border: color = !color width = !width style: dashed p +sexy-border("blue") p { border-color: #0000ff; border-width: 1in; border-style: dashed; }
  19. 19. $ gem install haml
  20. 20. $ haml --rails path/to/rails_app $ vim app/views/hello/index.html.haml $ vim public/stylesheets/sass/style.sass

×