CSS Preprocessor
Jun 11, 2015
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