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

1. CSS Preprocessor

2. ¿Qué es un preprocesador?
“En informática, un preprocesador es un programa que
procesa sus datos de entrada para producir una salida que
se utiliza como entrada a otro programa.”

3. ¿Qué es un preprocesador css?
“Programa que convierte CSS escrito en la sintaxis del
preprocesador específico y lo convierte en CSS final que
será 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 cuenta
No 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. SASS
Syntactically 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. Sintaxis
Variables. Operaciones y funciones

13. Sintaxis
Variables. Interpolación

14. Sintaxis
Nesting

15. Sintaxis
Nesting. Parent references

16. Sintaxis
Mixins. Include

17. Sintaxis
Mixins. Arguments

18. Sintaxis
Funciones nativas

19. Sintaxis
Funciones propias

20. Sintaxis
Estructura de control y bucles

21. Sintaxis
Herencia

22. Sintaxis
@import

23. Ejemplo Emagister CSS vs SASS

24. Empezar con SASS
Preparar entorno
PASO 1. Instalar Ruby y RubyGems
Ya viene instalado
$ sudo apt-get install ruby1.9.1
$ sudo apt-get install rubygems
PASO 2. Instalar SASS
$ gem install sass

25. Empezar con SASS
Compilar y vigilar cambios
Compilar
$ cd <ruta_hacia_la_carpeta>
$ sass input.scss output.css
Vigilar 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