Download - Trabajar CSS con estilo
![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