Haml y Sass: HTML y CSS dietéticos

34
HTML y CSS dietéticos + David Grilli @djGrill

Transcript of Haml y Sass: HTML y CSS dietéticos

Page 1: Haml y Sass: HTML y CSS dietéticos

HTML y CSS dietéticos

+

David Grilli@djGrill

Page 2: Haml y Sass: HTML y CSS dietéticos

Agenda

temas = ['HAML', 'SASS']

temas.each do |tema|print 'Introducción a ', temaprint ‘Contenido estático en ', temaprint ‘Contenido dinámico en ', tema

Page 3: Haml y Sass: HTML y CSS dietéticos
Page 4: Haml y Sass: HTML y CSS dietéticos

Introducción a HAML

<h1>Joincic 5</h1>

<p>Texto en latín cuyo significado es unmisterio para algunos de nosotros</p>

<% código ruby %>

Page 5: Haml y Sass: HTML y CSS dietéticos

Introducción a HAML

> HTML Abstraction Markup Language

> DRY

> Identación

Page 6: Haml y Sass: HTML y CSS dietéticos

Contenido estático en HAML

%h1 elementos HTML

.clase clases CSS

#id IDs

{:atr} atributos

Page 7: Haml y Sass: HTML y CSS dietéticos

%h1 Joincic 5

%pTexto en latín cuyo significado es un

misterio para algunos de nosotros

Contenido estático en HAML

Page 8: Haml y Sass: HTML y CSS dietéticos

!!! Strict%html

%head%body

%h1 Hola, mundo!

Contenido estático en HAML

Page 9: Haml y Sass: HTML y CSS dietéticos

<!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>

Contenido estático en HAML

Page 10: Haml y Sass: HTML y CSS dietéticos

!!! Strict%html

%head%body

%h1 Frutas famosas%div

%ul%li Manzana%li Mora%li Ninja

Contenido estático en HAML

Page 11: Haml y Sass: HTML y CSS dietéticos

<!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>Frutas famosas</h1><div>

<ul><li>Manzana</li><li>Mora</li><li>Ninja</li>

</ul></div>

</body></html>

Contenido estático en HAML

Page 12: Haml y Sass: HTML y CSS dietéticos

!!! Strict%html

%head%body

%h1 Frutas famosas%div.list#lista_1

%ul%li Manzana%li Mora%li Ninja

Contenido estático en HAML

Page 13: Haml y Sass: HTML y CSS dietéticos

!!! Strict%html

%head%body

%h1 Frutas famosas.list#lista_1

%ul%li Manzana%li Mora%li Ninja

Contenido estático en HAML

Page 14: Haml y Sass: HTML y CSS dietéticos

<!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>Frutas famosas</h1><div class="list" id="lista_1">

<ul><li>Manzana</li><li>Mora</li><li>Ninja</li>

</ul></div>

</body></html>

Contenido estático en HAML

Page 15: Haml y Sass: HTML y CSS dietéticos

!!! Strict%html

%head%body

%h1 Frutas famosas.list#lista_1

%ul%li

%a{:href => "http://apple.com"}Manzana

%li Mora%li Ninja

Contenido estático en HAML

Page 16: Haml y Sass: HTML y CSS dietéticos

<!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>Frutas famosas</h1><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 estático en HAML

Page 17: Haml y Sass: HTML y CSS dietéticos

Contenido dinámico en HAML

= out lógica con output

- logic lógica sin output

-#com comentarios

Page 18: Haml y Sass: HTML y CSS dietéticos

- @clase = "principal"!!! Strict%html

%head%body

%h1 Frutas famosas%ul

%li%a{:href => "http://apple.com", :class => @clase}

Manzana%li Mora%li Ninja

Contenido dinámico en HAML

Page 19: Haml y Sass: HTML y CSS dietéticos

- @clase = "principal"!!! Strict%html

%head%body

%h1 Frutas famosas%ul

%li%a{:href => "http://apple.com", :class => @clase}

Manzana= @clase

%li Mora%li Ninja

Contenido dinámico en HAML

Page 20: Haml y Sass: HTML y CSS dietéticos
Page 21: Haml y Sass: HTML y CSS dietéticos

Introducción a SASS

> Syntactically Awesome StyleSheets

> CSS estático a partir de una plantilla dinámica

> Identación

Page 22: Haml y Sass: HTML y CSS dietéticos

Contenido estático en SASS

h1 elementos HTML

.clase clases CSS

#id IDs

:atr atributos

Page 23: Haml y Sass: HTML y CSS dietéticos

bodyh1

:blackground-color #f5f6f7a

:color #444

Contenido estático en SASS

Page 24: Haml y Sass: HTML y CSS dietéticos

body h1 {blackground-color: #f5f6f7; }

body h1 a {color: #444; }

Contenido estático en SASS

Page 25: Haml y Sass: HTML y CSS dietéticos

bodyh1

:blackground-color #f5f6f7a.primero

:color #444a #id_1

:color #777

Contenido estático en SASS

Page 26: Haml y Sass: HTML y CSS dietéticos

body h1 {blackground-color: #f5f6f7; }

body h1 a.primero {color: #444; }

body h1 a #id_1 {color: #777; }

Contenido estático en SASS

Page 27: Haml y Sass: HTML y CSS dietéticos

Contenido dinámico en SASS

!var variables

+out comportamiento con output

=comp comportamiento sin output

Page 28: Haml y Sass: HTML y CSS dietéticos

!naranja = #ff7f00body

h1:blackground-color = !naranjaa

:color #444

Contenido dinámico en SASS

Page 29: Haml y Sass: HTML y CSS dietéticos

body h1 {blackground-color: #ff7f00; }

body h1 a {color: #444; }

Contenido dinámico en SASS

Page 30: Haml y Sass: HTML y CSS dietéticos

=texto:margin-bottom 0.7em:color #abc

bodyh1

:blackground-color #f5f6f7+texto

Contenido dinámico en SASS

Page 31: Haml y Sass: HTML y CSS dietéticos

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

Contenido dinámico en SASS

Page 32: Haml y Sass: HTML y CSS dietéticos
Page 33: Haml y Sass: HTML y CSS dietéticos

http://haml.info

http://sass-lang.com

http://peepcode.com

Más información Contacto

http://twitter.com/djGrill

http://davidgrilli.com

Page 34: Haml y Sass: HTML y CSS dietéticos

HTML y CSS dietéticos

+

David Grilli@djGrill