Haml, Sass & Compass
•
3 likes•1,061 views
- 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
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Haml, Sass & Compass
Similar to Haml, Sass & Compass (20)
Recently uploaded
Recently uploaded (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/