Haml, Sass & Compass

33
Haml, Sass, Compass Bácsi László [email protected]

description

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.

Transcript of Haml, Sass & Compass

Page 1: Haml, Sass & Compass

Haml, Sass, Compass

Bácsi László[email protected]

Page 2: Haml, Sass & Compass

Haml

• Sablonozó motor

• HTML-nél egyszerűbb és átláthatóbb

• Nincs redundancia (DRY)

• Szemantikus kód, szép kimenet

Page 3: Haml, Sass & Compass

Sass

• Haml szerű szintaxis StyleSheet-ekhez

• Egymásba ágyazott kiválasztók

• Nincs redundancia (DRY)

• Konstansok és egyszerű műveletek

• Újrahasználató CSS mixinek

Page 4: Haml, Sass & Compass

• 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

Page 5: Haml, Sass & Compass

Haml

Page 6: Haml, Sass & Compass

HTMLHaml#content .left.column %h2 Welcome to our site! %p= print_information .right.column= render :partial => "sidebar"

<div id='content'> <div class='left column'> <h2>Welcome to our site!</h2> <p> <%= print_information %> </p> </div> <div class="right column"> <%= render :partial => "sidebar" %> </div></div>

Alapok

Page 7: Haml, Sass & Compass

HTMLHaml%tagname{:attr => 'value'} content%tagname#id.class content

%tagname %innerTag and some content

#company Virgo

.employee Bácsi László

<tagname attr="value">content</tagname><tagname id="id" class="class">content</tagname>

<tagname> <innerTag/> and some content</tagname>

<div id="company">Virgo</div>

<div class="employee">Bácsi László</div>

Alapok

Page 8: Haml, Sass & Compass

Generált HTMLRubys Haml kód%dl - now = DateTime.now %dt Dátum és idő: %dd - if now > DateTime.parse('2008-12-31') Boldog új évet! - else = now.to_s

- @gems = %w{rails haml compass}%ul#gems - @gems.each do |gem| %li.gem= gem

<dl> <dt>Dátum és idő:</dt> <dd> Boldog új évet! </dd></dl>

<dl> <dt>Dátum és idő:</dt> <dd> 2008-12-30T12:31:45+01:00 </dd></dl>

<ul id='gems'> <li class='gem'>rails</li> <li class='gem'>haml</li> <li class='gem'>compass</li></ul>

-, = – Ruby kód beágyazás

Page 9: Haml, Sass & Compass

HTMLHaml%bar/

%script{:type => 'text/' + 'javascript', | :src => "/js/locale.#{@lang}.js"} |

# ruby helperekdef defaults {:type => 'checkbox', :value => '1'}end

def override {:type => 'radio'}end

%input{defaults, override, :selected => true}

<bar/>

<script src='/js/locale.hu.js' type='text/javascript'></script>

<input type="radio" value="1" selected="selected"/>

{} – Attribútumok

Page 10: Haml, Sass & Compass

HTMLHaml- @user = User.find(42)%div[@user, :current] %span[7] 7. Kúl, mi?

<div id="current_user_42" class="current_user"> <span id="fixnum_7" class="fixnum">7.</span> Kúl, mi?</div>

[] – id és class generálás

Page 11: Haml, Sass & Compass

HTMLHaml- name = "<b>Haml</b>"

= "Hello, #{name}!"== Hello, #{name}!&= "Hello, #{name}!"!= "Hello, #{name}!"-# Ez itt egy komment, ami nem kerül ki

Hello, <b>Haml</b>!Hello, <b>Haml</b>!Hello, &lt;b&gt;Haml&lt;/b&gt;!Hello, <b>Haml</b>!

==, &=, !=, -# – Ruby inputok

Page 12: Haml, Sass & Compass

HTMLHaml!!! XML!!! XML iso-8859-2!!! Strict

<?xml version='1.0' encoding='utf-8' ?><?xml version='1.0' encoding='iso-8859-2' ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!! – xml és doctype

Page 13: Haml, Sass & Compass

HTMLHaml- name = "Calvin".user / Ez itt a neve = name

/ Ezt a kódot most egyelőre nem rakjuk ki, mert problémák lehetnek belőle. %script evil();

/[if IE] %link{:href => "/css/ie.css", | :rel => "stylesheet", | :type => "text/css"} |

<div class='user'> <!-- Ez itt a neve --> Calvin</div>

<!-- Ezt a kódot most egyelőre nem rakjuk ki, mert problémák lehetnek belőle. <script> evil(); </script>-->

<!--[if IE]> <link href='/css/ie.css' rel='stylesheet' type='text/css' /><![endif]-->

/ – Kommentek

Page 14: Haml, Sass & Compass

HTMLHaml%div :markdown # Hello *World*!

%Content{:type => 'html'} :cdata <p>iWiW gadzsett</p>

# saját filtermodule Haml::Filters::Upcaser include Haml::Filters::Base

def render(text) text.upcase endend

%h1 :upcaser figyelem, figyelem!

<div> <h1>Hello <em>World</em>!</h1></div>

<Content type='html'> <![CDATA[ <p>iWiW gadzsett</p> ]]></Content>

<h1> FIGYELEM, FIGYELEM!</h1>

:markdown – Filterek

Page 15: Haml, Sass & Compass

Sass

Page 16: Haml, Sass & Compass

CSSSass#box margin: 10px color: #ff0

#box :margin 10px :color #ff0

#box :margin 10px :color #ff0 h1 :font-size 0.8em a :text-decoration none

#box { margin: 10px; color: #ff0; }

#box { margin: 10px; color: #ff0; }

#box { margin: 10px; color: #ff0; } #box h1 { font-size: 0.8em; } #box h1 a { text-decoration: none; }

Alapok

Page 17: Haml, Sass & Compass

CSSSass!highlight = #ccb!normal_text = 12px

body :font-size = !normal_text

em :background-color = !highlight

em.important :background-color = !highlight + #333 :font-size = 1.5 * !normal_text

body { font-size: 12px; }

em { background-color: #ccccbb; }

em.important { background-color: #ffffee; font-size: 18px; }

Konstansok

Page 18: Haml, Sass & Compass

CSSSass/* Fejléc#header :font-size 1em

// Ez itt meg bele se kerül a generált css-be

/* Ez egy többsoros "hangos" komment#footer :font-size 0.8em

// Ez pedig szintén több soros, de nem kerül be a css kódba

/* Fejléc */#header { font-size: 1em; }

/* * Ez egy többsoros * "hangos" komment */#footer { font-size: 0.8em; }

Kommentek

Page 19: Haml, Sass & Compass

CSSSass#main :width 600px p, div :font-size 1.5em a :font-weight bold img :border 0

#main { width: 600px; } #main p, #main div { font-size: 1.5em; } #main p a, #main div a { font-weight: bold; } #main p a img, #main div a img { border: 0; }

Bonyolultabb kombinációk

Page 20: Haml, Sass & Compass

CSSSassa :color #00f img :border 0 &.disabled :color #444 &:link, &:active, &:visited :text-decoration none &:hover :color #0ff img :border 2px solid #0ff body.admin & :border-color #f00

a { color: #00f; } a img { border: 0; } a.disabled { color: #444; } a:link, a:active, a:visited { text-decoration: none; } a:hover { color: #0ff; } a:hover img { border: 2px solid #0ff; } body.admin a:hover img { border-color: #f00; }

Szülő választó

Page 21: Haml, Sass & Compass

CSSSassem :font :size 14px :style italic :family Verdana, sans-serif

em { font-size: 14px; font-style: italic; font-family: Verdana, sans-serif; }

Attribútum namespace

Page 22: Haml, Sass & Compass

CSSSass=clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px

ul.images +clearfix

=larger-text :font-size 1.2emp strong +larger-text em +larger-text .important +larger-text

ul.images { display: inline-block; } ul.images:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html ul.images { height: 1px; }

p strong { font-size: 1.2em; } p strong em { font-size: 1.2em; } p strong em .important { font-size: 1.2em; }

Újrafelhasználható kódok

Page 23: Haml, Sass & Compass

CSSSass=hanging-indent(!indentation) text-indent = -!indentation padding-left = !indentation

p +hanging-indent(12px)

=float-container +clearfix div float: left .clear clear: both

#items +float-container

p { text-indent: -12px; padding-left: 12px; }

#items { display: inline-block; } #items:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html #items { height: 1px; } #items div { float: left; } #items .clear { clear: both; }

Paraméterek és kombinálás

Page 24: Haml, Sass & Compass

CSSSass// classes.sass.highlight :color #ffe

@import classes.sass

@import zen.css

// egyéb kukacokat is békénhagyja@font-face :font-family "Bitstream Vera Sans" :src url(http://foo.bar/bvs)

.highlight { color: #ffe; }

@import url(zen.css);@font-face { font-family: "Bitstream Vera Sans"; src: url(http://foo.bar/bvs); }

@import

Page 25: Haml, Sass & Compass

Compass

Page 26: Haml, Sass & Compass

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

Page 27: Haml, Sass & Compass

@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)

screen.sass (példa)

Page 28: Haml, Sass & Compass

Kompatibilitás

Page 29: Haml, Sass & Compass

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

Page 30: Haml, Sass & Compass

És a CSS

• Sass nagyon hasonlít CSS-hez

• Csak kiszeded a {} és ; karaktereket és valid Sass

• html2haml, css2sass

Page 31: Haml, Sass & Compass

Konfigurálhatóság

• :escape_html, :supress_eval, :autoclose, :preserve, stb.

• :style, :attribute_syntax

Page 32: Haml, Sass & Compass

$ 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 blueprintCompass 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) ndirectory 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

Telepítés

Page 33: Haml, Sass & Compass

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/