Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Haml, Sass & Compass

5,562 views

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
  • Be the first to comment

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/

×