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
Top Related