Haml y Sass: HTML y CSS dietéticos

HTML y CSS dietéticos
+
David Grilli
@djGrill

Agenda
temas = ['HAML', 'SASS']
temas.each do |tema|
print 'Introducción a ', tema
print ‘Contenido estático en ', tema
print ‘Contenido dinámico en ', tema

Introducción a HAML
<h1>Joincic 5</h1>
<p>
Texto en latín cuyo significado es un
misterio para algunos de nosotros
</p>
<% código ruby %>

Introducción a HAML
> HTML Abstraction Markup Language
> DRY
> Identación

Contenido estático en HAML
%h1 elementos HTML
.clase clases CSS
#id IDs
{:atr} atributos

%h1 Joincic 5
%p
Texto en latín cuyo significado es un
misterio para algunos de nosotros

!!! Strict
%html
%head
%body
%h1 Hola, mundo!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<h1>Hola, mundo!</h1>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
%div
%ul
%li Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<h1>Frutas famosas</h1>
<div>
<ul>
<li>Manzana</li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
%div.list#lista_1
%ul
%li Manzana
%li Mora
%li Ninja

!!! Strict
%html
%head
%body
%h1 Frutas famosas
.list#lista_1
%ul
%li Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<div class="list" id="lista_1">
<ul>
<li>Manzana</li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

!!! Strict
%html
%head
%body
%h1 Frutas famosas
.list#lista_1
%ul
%li
%a{:href => "http://apple.com"}
Manzana
%li Mora
%li Ninja

<html>
<head></head>
<body>
<div class="list" id="lista_1">
<ul>
<li><a href="http://apple.com">Manzana</a></li>
<li>Mora</li>
<li>Ninja</li>
</ul>
</div>
</body>
</html>

Contenido dinámico en HAML
= out lógica con output
- logic lógica sin output
-#com comentarios

- @clase = "principal"
!!! Strict
%html
%head
%body
%h1 Frutas famosas
%ul
%li
%a{:href => "http://apple.com", :class => @clase}
Manzana
%li Mora
%li Ninja

- @clase = "principal"
!!! Strict
%html
%head
%body
%h1 Frutas famosas
%ul
%li
%a{:href => "http://apple.com", :class => @clase}
Manzana
= @clase
%li Mora
%li Ninja

Introducción a SASS
> Syntactically Awesome StyleSheets
> CSS estático a partir de una plantilla dinámica
> Identación

Contenido estático en SASS
h1 elementos HTML
.clase clases CSS
#id IDs
:atr atributos

body
h1
:blackground-color #f5f6f7
a
:color #444

body h1 {
blackground-color: #f5f6f7; }
body h1 a {
color: #444; }

body
h1
a.primero
:color #444
a #id_1
:color #777

body h1 {
blackground-color: #f5f6f7; }
body h1 a.primero {
color: #444; }
body h1 a #id_1 {
color: #777; }

Contenido dinámico en SASS
!var variables
+out comportamiento con output
=comp comportamiento sin output

!naranja = #ff7f00
body
h1
:blackground-color = !naranja
a
:color #444

body h1 {
blackground-color: #ff7f00; }
body h1 a {
color: #444; }

=texto
:margin-bottom 0.7em
:color #abc
body
h1
+texto

body h1 {
blackground-color: #f5f6f7;
margin-bottom: 0.7em;
color: #abc; }

http://haml.info
http://sass-lang.com
http://peepcode.com
Más información Contacto
http://twitter.com/djGrill
http://davidgrilli.com

Haml y Sass: HTML y CSS dietéticos

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Haml y Sass: HTML y CSS dietéticos

Similar a Haml y Sass: HTML y CSS dietéticos (20)

Último

Último (11)

Haml y Sass: HTML y CSS dietéticos