SlideShare una empresa de Scribd logo
1 de 57
Haml/Sass
<body>
HTML+CSS
 </body>
�
�
%h2
  %span
%h2
-- %span
<h2>
  <span>   </span>


</h2>
!!! XML
!!!
%html
  %head
    %title
  %body
    %h1
    %h2
      %span   :
!!! XML
!!!
%html
  %head
    %title
  %body
    %h1
    %h2
      %span   :
!!! XML   <?xml version='1.0' encoding='u
!!!       <!DOCTYPE html PUBLIC "-//W
markup haiku


!!! XML     <?xml version='1.0' encoding='u
!!!         <!DOCTYPE html PUBLIC "-//W
markup haiku
          markup golf
!!! XML     <?xml version='1.0' encoding='u
!!!         <!DOCTYPE html PUBLIC "-//W
h2
  span
    :color midnightblue
h2
   span
     :color midnightblue




h2 span {
  color: midnightblue; }
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
         span
           :font-weight bold
           :color midnightblue
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
         span
           :font-weight bold
           :color midnightblue
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
         span
           :font-weight bold
           :color midnightblue
ifchanged
ifchanged
%body
  #header
    %h1
    %h2
      %span    :


  #main
    %h2
    .section
%body
  #header
    %h1
    %h2
      %span    :


  #main
    %h2
    .section
<body>
  <div id=”header”>
    ...
  </div>
  <div id=”main”>
    <h2>   </h2>
    <div class=”section”>
    </div>
  </div>
</body>
<body>
  <div id=”header”>
    ...
  </div>
  <div id=”main”>
    <h2>   </h2>
    <div class=”section”>
    </div>
  </div>
</body>
#main
  %h2
  .section
    %table
      %tr
        %td
        %td
        %td
#header
  ...
#main
  h2
     :border-left 10px solid midnightblue
     :padding-left 15px
  .section
     :margin-left 10px
     table tr td
       :padding 0 5px
#header
  ...
#main
  h2
     :border-left 10px solid midnightblue
     :padding-left 15px
  .section
     :margin-left 10px
     table tr td
       :padding 0 5px
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法

Más contenido relacionado

Destacado

Sequel — механизм доступа к БД, написанный на Ruby
Sequel — механизм доступа к БД, написанный на RubySequel — механизм доступа к БД, написанный на Ruby
Sequel — механизм доступа к БД, написанный на RubyAlexey Nayden
 
«Работа с базами данных с использованием Sequel»
«Работа с базами данных с использованием Sequel»«Работа с базами данных с использованием Sequel»
«Работа с базами данных с использованием Sequel»Olga Lavrentieva
 
развертывание среды Rails (антон веснин, Locum Ru)
развертывание среды Rails (антон веснин, Locum Ru)развертывание среды Rails (антон веснин, Locum Ru)
развертывание среды Rails (антон веснин, Locum Ru)guest40e031
 
Top10 доводов против языка Ruby
Top10 доводов против языка RubyTop10 доводов против языка Ruby
Top10 доводов против языка Rubyguest5f907e
 

Destacado (8)

Mini Rails Framework
Mini Rails FrameworkMini Rails Framework
Mini Rails Framework
 
Wider than rails
Wider than railsWider than rails
Wider than rails
 
Wider than rails
Wider than railsWider than rails
Wider than rails
 
Хэши в ruby
Хэши в rubyХэши в ruby
Хэши в ruby
 
Sequel — механизм доступа к БД, написанный на Ruby
Sequel — механизм доступа к БД, написанный на RubySequel — механизм доступа к БД, написанный на Ruby
Sequel — механизм доступа к БД, написанный на Ruby
 
«Работа с базами данных с использованием Sequel»
«Работа с базами данных с использованием Sequel»«Работа с базами данных с использованием Sequel»
«Работа с базами данных с использованием Sequel»
 
развертывание среды Rails (антон веснин, Locum Ru)
развертывание среды Rails (антон веснин, Locum Ru)развертывание среды Rails (антон веснин, Locum Ru)
развертывание среды Rails (антон веснин, Locum Ru)
 
Top10 доводов против языка Ruby
Top10 доводов против языка RubyTop10 доводов против языка Ruby
Top10 доводов против языка Ruby
 

Más de Tomohiro Nishimura

逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。Tomohiro Nishimura
 
シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降Tomohiro Nishimura
 
DSLについて語るときに僕の語ること
DSLについて語るときに僕の語ることDSLについて語るときに僕の語ること
DSLについて語るときに僕の語ることTomohiro Nishimura
 
Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Tomohiro Nishimura
 
NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法Tomohiro Nishimura
 
It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.Tomohiro Nishimura
 

Más de Tomohiro Nishimura (20)

逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。逃げ道をなくすということについて、僕の持っている知見を話します。
逃げ道をなくすということについて、僕の持っている知見を話します。
 
シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降シュッとふりかえる Ruby 2.0 以降
シュッとふりかえる Ruby 2.0 以降
 
DSLについて語るときに僕の語ること
DSLについて語るときに僕の語ることDSLについて語るときに僕の語ること
DSLについて語るときに僕の語ること
 
Atom ことはじめ
Atom ことはじめAtom ことはじめ
Atom ことはじめ
 
The way to the Kyoto.rb
The way to the Kyoto.rbThe way to the Kyoto.rb
The way to the Kyoto.rb
 
Kyotorb#4
Kyotorb#4Kyotorb#4
Kyotorb#4
 
Kyotorb#3
Kyotorb#3Kyotorb#3
Kyotorb#3
 
Kyotorb Meetup #2
Kyotorb Meetup #2Kyotorb Meetup #2
Kyotorb Meetup #2
 
Kyoto.rb
Kyoto.rbKyoto.rb
Kyoto.rb
 
KPTのすすめ
KPTのすすめKPTのすすめ
KPTのすすめ
 
2010年ふりかえる
2010年ふりかえる2010年ふりかえる
2010年ふりかえる
 
Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-Rubyist のための HTML5 入門 -Content Models-
Rubyist のための HTML5 入門 -Content Models-
 
NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法NoSQL を Ruby で実践するための n 個の方法
NoSQL を Ruby で実践するための n 個の方法
 
Boys, do LiveCoding
Boys, do LiveCodingBoys, do LiveCoding
Boys, do LiveCoding
 
Vim Text Object
Vim Text ObjectVim Text Object
Vim Text Object
 
Introduce the LiveCoding
Introduce the LiveCodingIntroduce the LiveCoding
Introduce the LiveCoding
 
2009年ふりかえり
2009年ふりかえり2009年ふりかえり
2009年ふりかえり
 
It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.It's Mechanize for it. Ruby as a Finder.
It's Mechanize for it. Ruby as a Finder.
 
Lazyselect
LazyselectLazyselect
Lazyselect
 
Introduce the Hacobu
Introduce the HacobuIntroduce the Hacobu
Introduce the Hacobu
 

Haml/Sassを使って履歴書を書くためのn個の方法

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 23. <h2> <span> </span> </h2>
  • 24.
  • 25. !!! XML !!! %html %head %title %body %h1 %h2 %span :
  • 26. !!! XML !!! %html %head %title %body %h1 %h2 %span :
  • 27. !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
  • 28. markup haiku !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
  • 29. markup haiku markup golf !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
  • 30.
  • 31.
  • 32. h2 span :color midnightblue
  • 33. h2 span :color midnightblue h2 span { color: midnightblue; }
  • 34. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
  • 35. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
  • 36. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
  • 37.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44. %body #header %h1 %h2 %span : #main %h2 .section
  • 45. %body #header %h1 %h2 %span : #main %h2 .section
  • 46. <body> <div id=”header”> ... </div> <div id=”main”> <h2> </h2> <div class=”section”> </div> </div> </body>
  • 47. <body> <div id=”header”> ... </div> <div id=”main”> <h2> </h2> <div class=”section”> </div> </div> </body>
  • 48. #main %h2 .section %table %tr %td %td %td
  • 49.
  • 50. #header ... #main h2 :border-left 10px solid midnightblue :padding-left 15px .section :margin-left 10px table tr td :padding 0 5px
  • 51. #header ... #main h2 :border-left 10px solid midnightblue :padding-left 15px .section :margin-left 10px table tr td :padding 0 5px