Your SlideShare is downloading. ×
Pre-procesadores CSS. SASS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pre-procesadores CSS. SASS

3,224
views

Published on

Introducción a los pre-procesadores CSS, y con un poco de detalle a SASS (Syntactically Awesome StyleSheet)

Introducción a los pre-procesadores CSS, y con un poco de detalle a SASS (Syntactically Awesome StyleSheet)

Published in: Technology

1 Comment
4 Likes
Statistics
Notes
  • No estoy en eso, pero creo que a mi hermano le puede interesar.
    Yo vine del Link de Emagister: wp.me/p1X288-gc
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,224
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
72
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Preprocessor
  • 2. ¿Qué es un preprocesador?“En informática, un preprocesador es un programa queprocesa sus datos de entrada para producir una salida quese utiliza como entrada a otro programa.”
  • 3. ¿Qué es un preprocesador css?“Programa que convierte CSS escrito en la sintaxis delpreprocesador específico y lo convierte en CSS final queserá interpretado por el navegador web.”
  • 4. ¿Por qué usar uno?- Nos permite escribir código CSS más rápido, organizado y fácil de mantener. - Organizando mejor el código: DRY vs WET ¿cómo? - Usando variables - Reutilizando código - Haciendo operaciones - Usando funciones, estructuras de control, bucles… - Comentando el código - Incluyendo archivos- Además, tenemos frameworks que nos facilitarán todavía más las cosas.
  • 5. Cosas a tener en cuentaNo todo iban a ser ventajas… - No es para principiantes - Hay que definir una buena estrategia - CSS más enfocados a programación
  • 6. Los más conocidos
  • 7. SASS vs LESS- Ruby - JavaScript- Procesado en servidor - Procesado en cliente- Compass - No framework- Popularidad baja - Muy popular- … - …
  • 8. SASSSyntactically Awesome StyleSheet
  • 9. Algunos datos sobre SASS- Creado por Hampton Catlin en 2007- Corre sobre Ruby- Acepta dos sintaxis - .SCSS - .SASS- “Es un meta-lenguaje en la parte superior de CSS que se utiliza para describir el estilo de un documento de forma limpia y estructurada…”
  • 10. Sintaxis Variables
  • 11. Sintaxis Variables
  • 12. SintaxisVariables. Operaciones y funciones
  • 13. SintaxisVariables. Interpolación
  • 14. Sintaxis Nesting
  • 15. SintaxisNesting. Parent references
  • 16. SintaxisMixins. Include
  • 17. SintaxisMixins. Arguments
  • 18. SintaxisFunciones nativas
  • 19. SintaxisFunciones propias
  • 20. SintaxisEstructura de control y bucles
  • 21. Sintaxis Herencia
  • 22. Sintaxis @import
  • 23. Ejemplo Emagister CSS vs SASS
  • 24. Empezar con SASS Preparar entornoPASO 1. Instalar Ruby y RubyGems Ya viene instalado $ sudo apt-get install ruby1.9.1 $ sudo apt-get install rubygemsPASO 2. Instalar SASS $ gem install sass
  • 25. Empezar con SASS Compilar y vigilar cambiosCompilar $ cd <ruta_hacia_la_carpeta> $ sass input.scss output.cssVigilar cambios $ sass --watch sass_folder:css_folder
  • 26. Linking- http://sass-lang.com/- http://blog.urbaninsight.com/2012/04/12/ten-reasons-you- should-be-using-css-preprocessor- apuntesalmargen.com/introduccion-a-los-pre- procesadores-de-css.html- http://dzignus.github.com/workshop-sass-compass/#6- http://css-tricks.com/sass-vs-less/- http://www.slideshare.net/utbkevin/less-vs-sass-css- precompiler-showdown-14068991

×