haml, sass & compass
Post on 13-May-2015
5.247 Views
Preview:
DESCRIPTION
TRANSCRIPT
Haml, Sass, Compass
Bácsi Lászlóbacsi.laszlo@virgo.hu
Haml
• Sablonozó motor
• HTML-nél egyszerűbb és átláthatóbb
• Nincs redundancia (DRY)
• Szemantikus kód, szép kimenet
Sass
• Haml szerű szintaxis StyleSheet-ekhez
• Egymásba ágyazott kiválasztók
• Nincs redundancia (DRY)
• Konstansok és egyszerű műveletek
• Újrahasználató CSS mixinek
• 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
Haml
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
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
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
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
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
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, <b>Haml</b>!Hello, <b>Haml</b>!
==, &=, !=, -# – Ruby inputok
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
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
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
Sass
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
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
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
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
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ó
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
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
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
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
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.)
@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)
Kompatibilitás
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
És a CSS
• Sass nagyon hasonlít CSS-hez
• Csak kiszeded a {} és ; karaktereket és valid Sass
• html2haml, css2sass
Konfigurálhatóság
• :escape_html, :supress_eval, :autoclose, :preserve, stb.
• :style, :attribute_syntax
$ 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
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/
top related