Haml, Sass & Compass
âą
3 gefĂ€llt mirâą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
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ăhnlich wie Haml, Sass & Compass
Ăhnlich wie Haml, Sass & Compass (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (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, clearïŹx, 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. KonïŹgurĂĄ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/