Haml, Sass & Compass
•
3 j'aime•1,061 vues
- Haml is a templating language that generates HTML and aims to be cleaner and more readable than raw HTML - Sass is a CSS preprocessor that adds features like variables, nested rules, and mixins to regular CSS - Compass is a framework built on Sass that provides useful CSS mixins and patterns like resets, grids, and typography helpers
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Haml, Sass & Compass
Similaire à Haml, Sass & Compass (20)
Dernier
Dernier (20)
Haml, Sass & Compass
- 1. Haml, Sass, Compass Bácsi László bacsi.laszlo@virgo.hu
- 2. Haml • Sablonozó motor • HTML-nél egyszerűbb és átláthatóbb • Nincs redundancia (DRY) • Szemantikus kód, szép kimenet
- 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. • 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. Haml
- 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. 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. -, = – 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. {} – 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. [] – 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. ==, &=, !=, -# – 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, <b>Haml</b>! != quot;Hello, #{name}!quot; Hello, <b>Haml</b>! -# Ez itt egy komment, ami nem kerül ki
- 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. / – 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. :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. Sass
- 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. 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. 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. 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. 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. 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. Ú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. 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. @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. Compass
- 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. 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. Kompatibilitás
- 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. És a CSS • Sass nagyon hasonlít CSS-hez • Csak kiszeded a {} és ; karaktereket és valid Sass • html2haml, css2sass
- 31. Konfigurálhatóság • :escape_html, :supress_eval, :autoclose, :preserve, stb. • :style, :attribute_syntax
- 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. 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/