trabajar css con estilo
DESCRIPTION
Esta charla tiene el objetivo de introducirles al uso de preprocesadores de CSS, una mejor forma de trabajar código CSS dinámico, en donde realmente se puedan aprovechar el uso de variables, funciones y pruebas lógicas dentro de nuestras definiciones de CSS.TRANSCRIPT
![Page 1: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/1.jpg)
TRABAJAR CSS CON ESTILO
Byron Corrales | @byroncor
![Page 2: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/2.jpg)
OOCSS
OOCSS se inspira en algunos principios de la OOP (abstracción, herencia, composición...)
![Page 3: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/3.jpg)
![Page 4: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/4.jpg)
![Page 5: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/5.jpg)
PREPROCESADORES CSS
Reducirás considerablemente el tiempo de desarrollo
Cambio en el flujo de trabajo
![Page 6: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/6.jpg)
Un preprocesador es un programa que procesa sus datos de entrada para producir una salida que se utiliza como entrada a otro programa
![Page 7: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/7.jpg)
SIMPLE Y PRÁCTICO
![Page 8: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/8.jpg)
DEADLINES
![Page 9: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/9.jpg)
![Page 10: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/10.jpg)
![Page 11: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/11.jpg)
RESISTENCIA
![Page 12: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/12.jpg)
![Page 13: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/13.jpg)
SASS
Ruby
LESS
Javascript, nodejs, java, php, python..
Compilado del lado del servidor Compilado del lado del cliente
2006 2010
HAML JADE
![Page 14: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/14.jpg)
![Page 15: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/15.jpg)
YO ESCOGÍ LESSCSSlesscss.org
![Page 16: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/16.jpg)
Una mejor organización del código
Proyectos más fáciles de mantener
Reutilización de código
Comentarios privados en modo desarrollo
VENTAJAS
![Page 17: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/17.jpg)
Debe aprender a usarse, y todo el equipo de desarrollo debe usarlo
Poco probable que quieras regresar al css común
DESVENTAJAS
![Page 18: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/18.jpg)
INSTALACIÓN - CLIENTE
Descargar en http://lesscss.org/
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
![Page 19: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/19.jpg)
INSTALACIÓN - SERVER
npm install -g less
lessc styles.less styles.css
![Page 20: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/20.jpg)
INSTALACIÓN - SERVER
npm install -g less
lessc styles.less styles.css
![Page 21: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/21.jpg)
VARIABLES
![Page 22: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/22.jpg)
MIXINGS / FUNCIONES
![Page 23: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/23.jpg)
NESTED RULES
![Page 24: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/24.jpg)
OPERACIONES
![Page 25: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/25.jpg)
@arguments
![Page 26: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/26.jpg)
GUARDS
![Page 27: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/27.jpg)
CHECKING FUNCTIONS
iscolorisnumberisstringiskeywordIsurl
ispixelispercentageisem
![Page 28: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/28.jpg)
COMENTARIOS
// Asi se escribe un comentario en less
/* Asi se escribe un comentario convencional en css*/
![Page 29: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/29.jpg)
LO MAS INTERESANTE ES LO QUE PODES CREAR
![Page 30: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/30.jpg)
style.less
lib_style.less
@import "lib_style.less";
![Page 31: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/31.jpg)
![Page 32: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/32.jpg)
markdotto.com/bootstrap/
![Page 33: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/33.jpg)
lesselements.com
![Page 34: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/34.jpg)
APPS
![Page 35: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/35.jpg)
SublimeText
![Page 36: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/36.jpg)
wearekiss.com/simpless
![Page 37: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/37.jpg)
incident57.com/codekit/
![Page 38: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/38.jpg)
github.com/Mte90/Plessc
![Page 39: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/39.jpg)
![Page 40: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/40.jpg)
![Page 41: Trabajar CSS con estilo](https://reader033.vdocuments.co/reader033/viewer/2022042614/558c8c21d8b42a46678b4690/html5/thumbnails/41.jpg)
GRACIAS