Haml y Sass: HTML y CSS dietéticos

1,301 views

Published on

Introducción a los metalenguajes Haml y Sass

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,301
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Haml y Sass: HTML y CSS dietéticos

  1. 1. HTML y CSS dietéticos+David Grilli@djGrill
  2. 2. Agendatemas = [HAML, SASS]temas.each do |tema|print Introducción a , temaprint ‘Contenido estático en , temaprint ‘Contenido dinámico en , tema
  3. 3. 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 %>
  4. 4. Introducción a HAML> HTML Abstraction Markup Language> DRY> Identación
  5. 5. Contenido estático en HAML%h1 elementos HTML.clase clases CSS#id IDs{:atr} atributos
  6. 6. %h1 Joincic 5%pTexto en latín cuyo significado es unmisterio para algunos de nosotrosContenido estático en HAML
  7. 7. !!! Strict%html%head%body%h1 Hola, mundo!Contenido estático en HAML
  8. 8. <!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
  9. 9. !!! Strict%html%head%body%h1 Frutas famosas%div%ul%li Manzana%li Mora%li NinjaContenido estático en HAML
  10. 10. <!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
  11. 11. !!! Strict%html%head%body%h1 Frutas famosas%div.list#lista_1%ul%li Manzana%li Mora%li NinjaContenido estático en HAML
  12. 12. !!! Strict%html%head%body%h1 Frutas famosas.list#lista_1%ul%li Manzana%li Mora%li NinjaContenido estático en HAML
  13. 13. <!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
  14. 14. !!! Strict%html%head%body%h1 Frutas famosas.list#lista_1%ul%li%a{:href => "http://apple.com"}Manzana%li Mora%li NinjaContenido estático en HAML
  15. 15. <!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
  16. 16. Contenido dinámico en HAML= out lógica con output- logic lógica sin output-#com comentarios
  17. 17. - @clase = "principal"!!! Strict%html%head%body%h1 Frutas famosas%ul%li%a{:href => "http://apple.com", :class => @clase}Manzana%li Mora%li NinjaContenido dinámico en HAML
  18. 18. - @clase = "principal"!!! Strict%html%head%body%h1 Frutas famosas%ul%li%a{:href => "http://apple.com", :class => @clase}Manzana= @clase%li Mora%li NinjaContenido dinámico en HAML
  19. 19. Introducción a SASS> Syntactically Awesome StyleSheets> CSS estático a partir de una plantilla dinámica> Identación
  20. 20. Contenido estático en SASSh1 elementos HTML.clase clases CSS#id IDs:atr atributos
  21. 21. bodyh1:blackground-color #f5f6f7a:color #444Contenido estático en SASS
  22. 22. body h1 {blackground-color: #f5f6f7; }body h1 a {color: #444; }Contenido estático en SASS
  23. 23. bodyh1:blackground-color #f5f6f7a.primero:color #444a #id_1:color #777Contenido estático en SASS
  24. 24. body h1 {blackground-color: #f5f6f7; }body h1 a.primero {color: #444; }body h1 a #id_1 {color: #777; }Contenido estático en SASS
  25. 25. Contenido dinámico en SASS!var variables+out comportamiento con output=comp comportamiento sin output
  26. 26. !naranja = #ff7f00bodyh1:blackground-color = !naranjaa:color #444Contenido dinámico en SASS
  27. 27. body h1 {blackground-color: #ff7f00; }body h1 a {color: #444; }Contenido dinámico en SASS
  28. 28. =texto:margin-bottom 0.7em:color #abcbodyh1:blackground-color #f5f6f7+textoContenido dinámico en SASS
  29. 29. body h1 {blackground-color: #f5f6f7;margin-bottom: 0.7em;color: #abc; }Contenido dinámico en SASS
  30. 30. http://haml.infohttp://sass-lang.comhttp://peepcode.comMás información Contactohttp://twitter.com/djGrillhttp://davidgrilli.com
  31. 31. HTML y CSS dietéticos+David Grilli@djGrill

×