![Page 1: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/1.jpg)
Multiplica tu productividad usando un preprocesador
de CSSLeonidas Esteban @LeonidasEsteban [email protected]
![Page 2: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/2.jpg)
Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4
![Page 3: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/3.jpg)
Páginas web(la era de ofrecer nuestro trabajo por solo dar presencia
en internet se acabó)
![Page 4: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/4.jpg)
Aplicaciones web(porque es más rentable)
![Page 5: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/5.jpg)
• Rendimiento • Escalabilidad • Soporte
![Page 6: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/6.jpg)
Optimizar flujos de trabajo backend / frontend
![Page 7: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/7.jpg)
Tecnologías del lado del servidorPython, PHP, Ruby
Frameworks para esas tecnologíasDjango, Laravel, Rails
![Page 8: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/8.jpg)
Tecnologías del lado del clienteHTML, CSS, Javascript
Preprocesadores para esas tecnologíasJade, (Stylus, Sass, Less), Coffeescript
![Page 9: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/9.jpg)
CONTEXTO
![Page 10: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/10.jpg)
HTMLEstructura
![Page 11: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/11.jpg)
CSSDiseño
![Page 12: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/12.jpg)
JavascriptInteractividad
![Page 13: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/13.jpg)
Hablemos de CSS
![Page 14: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/14.jpg)
Sintaxis
![Page 16: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/16.jpg)
Features
• Código optimizado
• Fácil de hacer cambios
• Reusable
• Soporte de navegadores modernos
![Page 17: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/17.jpg)
Tiempo de creación4 horas
Escalabilidad
![Page 18: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/18.jpg)
Tiempo de ediciónunos segundos dependiendo de cuanto demore el
compilador :P
Soporte
![Page 19: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/19.jpg)
411 lineas !9KB
rendimiento
![Page 20: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/20.jpg)
Una linea de código7KB
Rendimiento
![Page 21: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/21.jpg)
¿Reusable? ¿Fácil de cambiar?
![Page 22: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/22.jpg)
Esto no pudo haberse hecho de una forma
“Tradicional”
![Page 23: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/23.jpg)
¿qué es un preprocesador de CSS?
Un mediador entre una mejor sintaxis y el css de toda la vida
![Page 24: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/24.jpg)
Lenguaje > compilar > css
![Page 25: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/25.jpg)
Escribe menos y haz más(slide no patrocinado por jQuery)
![Page 26: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/26.jpg)
Resultado: mini-septiembre2014.styl
#likeabossCódigo optimizado
![Page 27: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/27.jpg)
Variables(css no tiene variable >.<)
Fácil de hacer cambios
![Page 28: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/28.jpg)
Módulos(Los quitamos si dejan de ser necesarios)
Reutilizable
![Page 29: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/29.jpg)
OMG MágiaMiniDate.styl
Soporte de navegadores
![Page 30: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/30.jpg)
mini-septiembre2014.css 7KB
![Page 31: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/31.jpg)
Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4
![Page 32: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/32.jpg)
Muchas, muchas gracias :)
![Page 33: Multiplica tu productividad usando un preprocesador de css](https://reader033.vdocuments.net/reader033/viewer/2022042815/556ac47cd8b42acd348b4b32/html5/thumbnails/33.jpg)
https:mejorando.la/frontend/