Charla en Barcamp Buenos Aires 2013 sobre el uso de preprocesadores HTML y CSS. Se cubren JADE, SASS y LESS

1. desarrollo web inteligente
con preprocesadores html y css
max kraszewski
@minimalart

2. cómo comenzamos un proyecto web

3. html

4. html
html

5. html
html
html
html
html
html
html
html
html
html
html
html
html
html
html

6. html
html
html
html
repetición de gran parte del código
html
html
html
html
html
html
html

8. complejidad del DOM y código inmantenible

9. JADE node template engine

10. nodos
<div>
<span></span>
</div>
div
span
html
jade
ids
<div
id=“main”>
html
div#main
jade
clases
<div
class=“message”>
html
div.message
jade
atributos
<script
src=“js/jquery.js”/>
html
script(src=js/jquery.js)
jade

11. jade
html

12. simplicidad. elegancia.

13. include de templates
//
header.jade
head
title
Mi
Sitio
script(src=js/jquery.js)
//
footer.jade
footer
p
Copyright
2013
//
index.jade
doctype
html
include
head
body
h1
Bienvenidos
p
Parrafo
include
footer
jade
jade
html
jade

14. extend y soporte de bloques
//
layout.jade
doctype
html
head
title
Mi
Sitio
block
script
body
block
content
footer
Copyright
2013
//
about.jade
extends
layout
!
block
content
h1
Sobre
mi
p
Mi
nombre
es
Max
p
Vivo
en
Buenos
Aires
//
index.jade
extends
layout
!
block
script
script(src=js/jquery.js)
!
block
content
h1
Bienvenidos
p
Párrafo
jade
jade
jade
//
contact.jade
extends
layout
!
block
content
h1
Contacto
form
input#nombre(type=“text”)
jade

15. layout.jade
index.jade
about.jade
contact.jade
other.jade
jade engine
index.html
about.html
contact.html
other.html

16. simplicidad. elegancia.
robustez.velocidad.organización

17. bien. agreguemos estilos

18. main.css
index.html

19. layout.css
fonts.css
colors.css
modules.css
reset.css
@import
main.css
index.html

20. reducción de performance

21. layout.css
fonts.css
colors.css
modules.css
link href
index.html
reset.css
main.css

22. un poco mejor…
pero aún muchos http requests extras

24. redundancia y nula reutilización

25. LESS dynamic stylesheet language

26. variables
@main-­‐color:
#FFCC00;
!
h1
{
color:
@main-­‐color;
}
!
header
{
background-­‐color:
@main-­‐color;
}
.less
@main-­‐font:
“Arial,Tahoma”;
!
h1
{
font-­‐family:
@main-­‐font;
}
!
h2
{
font:
bold
1.2em
@main-­‐font;
}
.less
h1
{
color:
#FFCC00;
}
!
header
{
background-­‐color:
#FFCC00;
}
.css
h1
{
font-­‐family:
“Arial,Tahoma”;
}
!
header
{
font:
bold
1.2em
“Arial,Tahoma”;
}
.css

27. import
@import
“reset.css”;
@import
“grid.less”;
@import
“colors.less”;
@import
“icons.less”;
!
header
{
color:
@color;
}
.less
(content
of
reset.css)
(content
of
grid.less)
(content
of
colors.less)
(content
of
icons.less)
!
header
{
color:
black;
}
!
.css
anidamiento
header
{
h1
{
background-­‐color:
gray;
color:
white;
}
nav
{
background-­‐color:
blue;
ul
{
list-­‐style-­‐type:
none;
}
}
}
.less
header
h1
{
background-­‐color:
gray;
color:
white;
}
header
nav
{
background-­‐color:
blue;
}
header
nav
ul
{
list-­‐style-­‐type:
none;
}
!
.css
!

28. operaciones matemáticas
@page-­‐width:
960px;
@main-­‐width:
600px;
@sidebar-­‐width:
@page-­‐width
-­‐
@main-­‐width
.less
operaciones de color
@color:
red;
!
button
{
background-­‐color:
@color;
&:hover
{background-­‐color:
darken(@color,
10%);
}
!
.less

29. mixins con y sin parámetros
.bordered
{
border-­‐top:
1px
dotted
black;
border-­‐bottom:
2px
solid
black;
}
!
.rounded(@radius)
{
border-­‐radius:
@radius;
}
!
button
{
background-­‐color:
red;
color:
white;
.bordered;
}
!
label
{
background-­‐color:
red;
color:
white;
.rounded(4px);
}
.less

30. simplicidad. elegancia.
robustez.velocidad.organización
reutilización de librerías

33. SASS syntactically awesome stylesheet

34. el 80% de SASS y LESS es similar

38. cual usar? depende

39. instalación y uso

40. jade
>
npm
install
jade
!
>
jade
index.jade
index.html
.jade
less
>
npm
install
less
!
>
lesscss
style.less
style.css
.less
sass
>
gem
install
sass
!
>
sass
style.scss
style.scss
.sass

45. simplicidad. elegancia.
robustez.velocidad.organización
reutilización de librerías
dry. don’t repeat yourself

46. “If your CSS is complicated enough to need a
compiler or pre-processor, you’re fucking
doing it wrong!” Andrew Clarke, 2009

47. “If your CSS is complicated enough to need a
compiler or pre-processor, you’re fucking
doing it wrong!
“I once wrote that there was no need to use a
CSS pre-processor like LESS or Sass. I was
wrong. Very sorry.” Andrew Clarke, 2011

48. “By becoming web developers you agreed on
staying up to date with all the new cool stuff.
!
THIS is the new cool stuff.
Jonathan Verrechia (creator of Initialzr)

49. gracias !
max kraszewski
@minimalart