Haml, Sass, Compass

         Bácsi László
     bacsi.laszlo@virgo.hu
Haml

•   Sablonozó motor
•   HTML-nél egyszerűbb és átláthatóbb
•   Nincs redundancia (DRY)
•   Szemantikus kód, szép kim...
Sass

•   Haml szerű szintaxis StyleSheet-ekhez
•   Egymásba ágyazott kiválasztók
•   Nincs redundancia (DRY)
•   Konstans...
•   A leíró kód szép kellene legyen

•   A leíró kód nem kellene ismételje
    magát

•   A leíró kód jól indentált kellen...
Haml
Alapok
Haml                                            HTML
#content                                        <div id='conte...
Alapok
Haml                                 HTML
%tagname{:attr => 'value'} content   <tagname attr=quot;valuequot;>conten...
-, = – Ruby kód beágyazás
Rubys Haml kód                                Generált HTML
%dl                                 ...
{} – Attribútumok
Haml                                            HTML
%bar/                                           <ba...
[] – id és class generálás
Haml                      HTML
- @user = User.find(42)   <div id=quot;current_user_42quot;
%div...
==, &=, !=, -# – Ruby inputok
Haml                                      HTML
- name = quot;<b>Haml</b>quot;

= quot;Hello,...
!!! – xml és doctype
Haml                 HTML
!!! XML              <?xml version='1.0' encoding='utf-8' ?>
!!! XML iso-88...
/ – Kommentek
Haml                                           HTML
- name = quot;Calvinquot;                              <...
:markdown – Filterek
Haml                            HTML
%div                            <div>
  :markdown               ...
Sass
Alapok
Sass                           CSS
#box                           #box {
  margin: 10px                   margin: 1...
Konstansok
Sass                                      CSS
!highlight = #ccb
!normal_text = 12px

body                      ...
Kommentek
Sass                                            CSS
/* Fejléc                                       /* Fejléc */...
Bonyolultabb kombinációk
Sass                      CSS
#main                     #main {
  :width 600px              width...
Szülő választó
Sass                              CSS
a                                 a{
    :color #00f                 ...
Attribútum namespace
Sass                              CSS
em                                em {
  :font                 ...
Újrafelhasználható kódok
Sass                      CSS
=clearfix                 ul.images {
  display: inline-block     d...
Paraméterek és kombinálás
Sass                            CSS
=hanging-indent(!indentation)   p{
  text-indent = -!indenta...
@import
Sass                                   CSS
// classes.sass                        .highlight {
.highlight         ...
Compass
Mi az a Compass?
•   Egy Sass-re épülő framework
•   Több ismert CSS framework-öt
    támogat Sass mixinek segítségével
  ...
screen.sass (példa)
@import   blueprint/screen.sass
@import   blueprint/modules/grid.sass
@import   blueprint/modules/colo...
Kompatibilitás
Akkor ERB szemét?
•   A különböző template-ek megélnek
    egymás mellett
•   show.html.erb, show.html.haml,
    feed.xml....
És a CSS

•   Sass nagyon hasonlít CSS-hez
•   Csak kiszeded a {} és ; karaktereket és
    valid Sass
•   html2haml, css2s...
Konfigurálhatóság


•   :escape_html, :supress_eval,
    :autoclose, :preserve, stb.
•   :style, :attribute_syntax
Telepítés
$   git clone git://github.com/nex3/haml.git
$   cd haml && rake install; cd ..
$   git clone git://github.com/c...
További infók

•   http://haml.hamptoncatlin.com/

•   http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html

•   http...
Upcoming SlideShare
Loading in...5
×

Haml, Sass & Compass

5,250

Published on

A Haml, Sass és Compass segítségével jól struktúrált átlátható redundanciáktól mentes view és stylesheet kódot írhatunk. A prezentációban ezeket az eszközöket mutatom be.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,250
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Haml, Sass & Compass

  1. 1. Haml, Sass, Compass Bácsi László bacsi.laszlo@virgo.hu
  2. 2. Haml • Sablonozó motor • HTML-nél egyszerűbb és átláthatóbb • Nincs redundancia (DRY) • Szemantikus kód, szép kimenet
  3. 3. Sass • Haml szerű szintaxis StyleSheet-ekhez • Egymásba ágyazott kiválasztók • Nincs redundancia (DRY) • Konstansok és egyszerű műveletek • Újrahasználató CSS mixinek
  4. 4. • A leíró kód szép kellene legyen • A leíró kód nem kellene ismételje magát • A leíró kód jól indentált kellene legyen • A struktúra tisztán látható kellene legyen
  5. 5. Haml
  6. 6. Alapok Haml HTML #content <div id='content'> .left.column <div class='left column'> %h2 Welcome to our site! <h2>Welcome to our site!</h2> %p= print_information <p> .right.column= render :partial => quot;sidebarquot; <%= print_information %> </p> </div> <div class=quot;right columnquot;> <%= render :partial => quot;sidebarquot; %> </div> </div>
  7. 7. Alapok Haml HTML %tagname{:attr => 'value'} content <tagname attr=quot;valuequot;>content</tagname> %tagname#id.class content <tagname id=quot;idquot; class=quot;classquot;>content</ tagname> %tagname <tagname> %innerTag <innerTag/> and some content and some content </tagname> #company Virgo <div id=quot;companyquot;>Virgo</div> .employee Bácsi László <div class=quot;employeequot;>Bácsi László</div>
  8. 8. -, = – Ruby kód beágyazás Rubys Haml kód Generált HTML %dl <dl> - now = DateTime.now <dt>Dátum és idő:</dt> %dt Dátum és idő: <dd> %dd Boldog új évet! - if now > DateTime.parse('2008-12-31') </dd> Boldog új évet! </dl> - else = now.to_s <dl> <dt>Dátum és idő:</dt> <dd> 2008-12-30T12:31:45+01:00 </dd> </dl> - @gems = %w{rails haml compass} <ul id='gems'> %ul#gems <li class='gem'>rails</li> - @gems.each do |gem| <li class='gem'>haml</li> %li.gem= gem <li class='gem'>compass</li> </ul>
  9. 9. {} – Attribútumok Haml HTML %bar/ <bar/> %script{:type => 'text/' + 'javascript', | <script src='/js/locale.hu.js' type='text/ :src => quot;/js/locale.#{@lang}.jsquot;} | javascript'></script> # ruby helperek def defaults {:type => 'checkbox', :value => '1'} end def override {:type => 'radio'} end <input type=quot;radioquot; value=quot;1quot; %input{defaults, override, :selected => true} selected=quot;selectedquot;/>
  10. 10. [] – id és class generálás Haml HTML - @user = User.find(42) <div id=quot;current_user_42quot; %div[@user, :current] class=quot;current_userquot;> %span[7] 7. <span id=quot;fixnum_7quot; class=quot;fixnumquot;>7.</span> Kúl, mi? Kúl, mi? </div>
  11. 11. ==, &=, !=, -# – Ruby inputok Haml HTML - name = quot;<b>Haml</b>quot; = quot;Hello, #{name}!quot; Hello, <b>Haml</b>! == Hello, #{name}! Hello, <b>Haml</b>! &= quot;Hello, #{name}!quot; Hello, &lt;b&gt;Haml&lt;/b&gt;! != quot;Hello, #{name}!quot; Hello, <b>Haml</b>! -# Ez itt egy komment, ami nem kerül ki
  12. 12. !!! – xml és doctype Haml HTML !!! XML <?xml version='1.0' encoding='utf-8' ?> !!! XML iso-8859-2 <?xml version='1.0' encoding='iso-8859-2' ?> !!! Strict <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtdquot;>
  13. 13. / – Kommentek Haml HTML - name = quot;Calvinquot; <div class='user'> .user <!-- Ez itt a neve --> / Ez itt a neve Calvin = name </div> / <!-- Ezt a kódot most egyelőre nem rakjuk ki, Ezt a kódot most egyelőre nem rakjuk ki, mert problémák lehetnek belőle. mert problémák lehetnek belőle. %script <script> evil(); evil(); </script> --> <!--[if IE]> /[if IE] <link href='/css/ie.css' rel='stylesheet' %link{:href => quot;/css/ie.cssquot;, | type='text/css' /> :rel => quot;stylesheetquot;, | <![endif]--> :type => quot;text/cssquot;} |
  14. 14. :markdown – Filterek Haml HTML %div <div> :markdown <h1>Hello <em>World</em>!</h1> # Hello *World*! </div> %Content{:type => 'html'} <Content type='html'> :cdata <![CDATA[ <p>iWiW gadzsett</p> <p>iWiW gadzsett</p> ]]> </Content> # saját filter module Haml::Filters::Upcaser include Haml::Filters::Base def render(text) text.upcase end end %h1 <h1> :upcaser FIGYELEM, FIGYELEM! figyelem, figyelem! </h1>
  15. 15. Sass
  16. 16. Alapok Sass CSS #box #box { margin: 10px margin: 10px; color: #ff0 color: #ff0; } #box #box { :margin 10px margin: 10px; :color #ff0 color: #ff0; } #box #box { :margin 10px margin: 10px; :color #ff0 color: #ff0; } h1 #box h1 { :font-size 0.8em font-size: 0.8em; } a #box h1 a { :text-decoration none text-decoration: none; }
  17. 17. Konstansok Sass CSS !highlight = #ccb !normal_text = 12px body body { :font-size = !normal_text font-size: 12px; } em em { :background-color = !highlight background-color: #ccccbb; } em.important em.important { :background-color = !highlight + #333 background-color: #ffffee; :font-size = 1.5 * !normal_text font-size: 18px; }
  18. 18. Kommentek Sass CSS /* Fejléc /* Fejléc */ #header #header { :font-size 1em font-size: 1em; } // Ez itt meg bele se kerül a generált css-be /* /* * Ez egy többsoros Ez egy többsoros * quot;hangosquot; komment */ quot;hangosquot; komment #footer { #footer font-size: 0.8em; } :font-size 0.8em // Ez pedig szintén több soros, de nem kerül be a css kódba
  19. 19. Bonyolultabb kombinációk Sass CSS #main #main { :width 600px width: 600px; } p, div #main p, #main div { :font-size 1.5em font-size: 1.5em; } a #main p a, #main div a { :font-weight bold font-weight: bold; } img #main p a img, #main div a img { :border 0 border: 0; }
  20. 20. Szülő választó Sass CSS a a{ :color #00f color: #00f; } img a img { :border 0 border: 0; } &.disabled a.disabled { :color #444 color: #444; } &:link, &:active, &:visited a:link, a:active, a:visited { :text-decoration none text-decoration: none; } &:hover a:hover { :color #0ff color: #0ff; } img a:hover img { :border 2px solid #0ff border: 2px solid #0ff; } body.admin & body.admin a:hover img { :border-color #f00 border-color: #f00; }
  21. 21. Attribútum namespace Sass CSS em em { :font font-size: 14px; :size 14px font-style: italic; :style italic font-family: Verdana, sans-serif; } :family Verdana, sans-serif
  22. 22. Újrafelhasználható kódok Sass CSS =clearfix ul.images { display: inline-block display: inline-block; } &:after ul.images:after { content: quot;.quot; content: quot;.quot;; display: block display: block; height: 0 height: 0; clear: both clear: both; visibility: hidden visibility: hidden; } * html & * html ul.images { height: 1px height: 1px; } ul.images +clearfix p strong { =larger-text font-size: 1.2em; } :font-size 1.2em p strong em { p strong font-size: 1.2em; } +larger-text p strong em .important { em font-size: 1.2em; } +larger-text .important +larger-text
  23. 23. Paraméterek és kombinálás Sass CSS =hanging-indent(!indentation) p{ text-indent = -!indentation text-indent: -12px; padding-left = !indentation padding-left: 12px; } p +hanging-indent(12px) =float-container #items { +clearfix display: inline-block; } div #items:after { float: left content: quot;.quot;; .clear display: block; clear: both height: 0; clear: both; #items visibility: hidden; } +float-container * html #items { height: 1px; } #items div { float: left; } #items .clear { clear: both; }
  24. 24. @import Sass CSS // classes.sass .highlight { .highlight color: #ffe; } :color #ffe @import url(zen.css); @import classes.sass @font-face { font-family: quot;Bitstream Vera Sansquot;; @import zen.css src: url(http://foo.bar/bvs); } // egyéb kukacokat is békénhagyja @font-face :font-family quot;Bitstream Vera Sansquot; :src url(http://foo.bar/bvs)
  25. 25. Compass
  26. 26. Mi az a Compass? • Egy Sass-re épülő framework • Több ismert CSS framework-öt támogat Sass mixinek segítségével (Blueprint, YUI, 960.gs) • Sok hasznos CSS mintát ad (reset, clearfix, no-bullets, horizontal-list, inline-list, inline-block, tag-cloud, alternating-rows-and-columns, stb.)
  27. 27. screen.sass (példa) @import blueprint/screen.sass @import blueprint/modules/grid.sass @import blueprint/modules/colors.sass @import compass/reset.sass @import compass/utilities.sass body.blueprint +blueprint-typography .container +container #header +column(24) h1 :float left #site-actions :float right +horizontal-list +no-bullets #main-content +column(18) +colborder #sidebar +column(5,true) #footer +column(24)
  28. 28. Kompatibilitás
  29. 29. Akkor ERB szemét? • A különböző template-ek megélnek egymás mellett • show.html.erb, show.html.haml, feed.xml.builder, feed.xml.haml • Generált ERB kódok maradhatnak, amíg át nem kell írni • Akár kombinálhatóak is
  30. 30. És a CSS • Sass nagyon hasonlít CSS-hez • Csak kiszeded a {} és ; karaktereket és valid Sass • html2haml, css2sass
  31. 31. Konfigurálhatóság • :escape_html, :supress_eval, :autoclose, :preserve, stb. • :style, :attribute_syntax
  32. 32. Telepítés $ git clone git://github.com/nex3/haml.git $ cd haml && rake install; cd .. $ git clone git://github.com/chriseppstein/compass.git $ cd compass && rake install; cd .. $ cd /my/cool/rails/project $ haml --rails . $ compass --rails -f blueprint Compass recommends that you keep your stylesheets in app/stylesheets/ instead of the Sass default location of public/stylesheets/sass/. Is this OK? (Y/n) y Compass recommends that you keep your compiled css in public/stylesheets/ compiled/ instead the Sass default of public/stylesheets/. However, if you're exclusively using Sass, then public/stylesheets/ is recommended. Emit compiled stylesheets to public/stylesheets/compiled? (Y/n) n directory app/stylesheets/ create app/stylesheets/screen.sass create app/stylesheets/print.sass create app/stylesheets/ie.sass create config/initializers/compass.rb create app/views/layouts/application.html.haml
  33. 33. További infók • http://haml.hamptoncatlin.com/ • http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html • http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html • http://wiki.github.com/chriseppstein/compass/ • http://acts-as-architect.blogspot.com/2008/11/compass- primer.html • http://www.blueprintcss.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×