Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pre-procesadores CSS. SASS

5,416 views

Published on

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

Published in: Technology
  • 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

Pre-procesadores CSS. SASS

  1. 1. CSS Preprocessor
  2. 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. 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. 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. 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. 6. Los más conocidos
  7. 7. SASS vs LESS- Ruby - JavaScript- Procesado en servidor - Procesado en cliente- Compass - No framework- Popularidad baja - Muy popular- … - …
  8. 8. SASSSyntactically Awesome StyleSheet
  9. 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. 10. Sintaxis Variables
  11. 11. Sintaxis Variables
  12. 12. SintaxisVariables. Operaciones y funciones
  13. 13. SintaxisVariables. Interpolación
  14. 14. Sintaxis Nesting
  15. 15. SintaxisNesting. Parent references
  16. 16. SintaxisMixins. Include
  17. 17. SintaxisMixins. Arguments
  18. 18. SintaxisFunciones nativas
  19. 19. SintaxisFunciones propias
  20. 20. SintaxisEstructura de control y bucles
  21. 21. Sintaxis Herencia
  22. 22. Sintaxis @import
  23. 23. Ejemplo Emagister CSS vs SASS
  24. 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. 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. 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

×