Pre-procesadores CSS. SASS

  • 2,904 views
Uploaded 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)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • No estoy en eso, pero creo que a mi hermano le puede interesar.
    Yo vine del Link de Emagister: wp.me/p1X288-gc
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,904
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
64
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