- 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
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
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>
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; }
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.)
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
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