Preprocesadores CSS con LessCSS
-
Upload
avanet -
Category
Technology
-
view
210 -
download
5
description
Transcript of Preprocesadores CSS con LessCSS
![Page 1: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/1.jpg)
Preprocesadores CSScon LessCSS
Esteban BeltránTwitter: @academoIntegrante de AVANET
![Page 2: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/2.jpg)
¿Que es un preprocesador?● Programa separado que
prepara el texto para ser procesado por el programa/compilador/interprete principal
● Permite escribir código CSS más logico, organizado y facil de mantener
![Page 3: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/3.jpg)
¿Que es un preprocesador?● Programa que convierte
CSS escrito en la sintaxis del preprocesador especifico y lo convierte en CSS final que será interpretado por el navegador web
![Page 4: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/4.jpg)
Preprocesadores Existentes?
http://gnoma.es/blog/10-errores-comunes-de-disenadores-web-novatos/
● Less CSS● Sass● CSS Crush● Turbine● Switch CSS● Muchos más...
![Page 5: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/5.jpg)
Para que nos sirven?
http://gnoma.es/blog/10-errores-comunes-de-programadores-web-novatos/
![Page 6: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/6.jpg)
Carácteristicas Comunes
● Codigo organizado
● Variables● Reutilización de Código● Operaciones● Funciones● Comentarios de una
linea● Mixings
![Page 7: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/7.jpg)
Ventajas
● Código más organizado
● Proyectos más fáciles de mantener
● Reutilización de código
![Page 8: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/8.jpg)
Desventajas
● Debe aprender a usarse (nada dificil)
● Todo el equipo de desarrollo debe usarlo
● Una vez lo usas no quieres volver a CSS común (es esa una desventaja?)
![Page 9: Preprocesadores CSS con LessCSS](https://reader035.fdocuments.ec/reader035/viewer/2022081816/549a42e3b47959514d8b59aa/html5/thumbnails/9.jpg)
Vamos a la práctica!