multiplica tu productividad usando un preprocesador de css

Multiplica tu productividad usando un preprocesador

de CSSLeonidas Esteban @LeonidasEsteban l@mejorando.la

Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4

Páginas web(la era de ofrecer nuestro trabajo por solo dar presencia

en internet se acabó)

Aplicaciones web(porque es más rentable)

• Rendimiento • Escalabilidad • Soporte

Optimizar flujos de trabajo backend / frontend

Tecnologías del lado del servidorPython, PHP, Ruby

Frameworks para esas tecnologíasDjango, Laravel, Rails

Tecnologías del lado del clienteHTML, CSS, Javascript

Preprocesadores para esas tecnologíasJade, (Stylus, Sass, Less), Coffeescript

CONTEXTO

HTMLEstructura

CSSDiseño

JavascriptInteractividad

Hablemos de CSS

Sintaxis

https://mejorando.la/mini/Caso de estudio

Features

• Código optimizado

• Fácil de hacer cambios

• Reusable

• Soporte de navegadores modernos

Tiempo de creación4 horas

Escalabilidad

Tiempo de ediciónunos segundos dependiendo de cuanto demore el

compilador :P

Soporte

411 lineas !9KB

rendimiento

Una linea de código7KB

Rendimiento

¿Reusable? ¿Fácil de cambiar?

Esto no pudo haberse hecho de una forma

“Tradicional”

¿qué es un preprocesador de CSS?

Un mediador entre una mejor sintaxis y el css de toda la vida

Lenguaje > compilar > css

Escribe menos y haz más(slide no patrocinado por jQuery)

Resultado: mini-septiembre2014.styl

#likeabossCódigo optimizado

Variables(css no tiene variable >.<)

Fácil de hacer cambios

Módulos(Los quitamos si dejan de ser necesarios)

Reutilizable

OMG MágiaMiniDate.styl

Soporte de navegadores

mini-septiembre2014.css 7KB

Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4

Muchas, muchas gracias :)

https:mejorando.la/frontend/