CSS Preprocessor

¿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.”

¿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.”

¿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- 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.

¿cómo?

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

Los más conocidos

SASS vs LESS

- Ruby

- Procesado en servidor

- Compass

- Popularidad baja

- …

- JavaScript

- Procesado en cliente

- No framework

- Muy popular

- …

SASSSyntactically Awesome

StyleSheet

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…”

SintaxisVariables

SintaxisVariables

SintaxisVariables. Operaciones y funciones

SintaxisVariables. Interpolación

SintaxisNesting

SintaxisNesting. Parent references

SintaxisMixins. Include

SintaxisMixins. Arguments

SintaxisFunciones nativas

SintaxisFunciones propias

SintaxisEstructura de control y bucles

SintaxisHerencia

Sintaxis@import

Ejemplo Emagister CSS vs SASS

Empezar con SASSPreparar 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

Empezar con SASSCompilar y vigilar cambios

Compilar

$ cd <ruta_hacia_la_carpeta>

$ sass input.scss output.css

Vigilar cambios

$ sass --watch sass_folder:css_folder

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