CSS Preprocessors Time!- with SASS, LESS and Stylus -

(and Finn and Jake)

@nahuelsotelo

Hola.Nahuel Sotelo

Soy

machaco teclados en

@nahuelsotelo

¿Qué son?

Una forma más eficiente de escribir CSS.

¿Qué son?

.scss / .less / .styl

.css

COMPILA

¿Qué necesito para empezar?

¿Qué necesito?

Un archivo de texto con una extensión determinada(.scss, .less, .styl).

Un editor de código que reconozca el lenguaje.

Alguna manera de compilarlo en CSS.

Hay varias maneras de compilar:

En servidor (ruby)

En cliente (JavaScript)

En local (Compass, Codekit, Scout, less.app)

¿Qué necesito?

¿Qué necesito?

Mi recomendación:

¿Qué necesito?

Codekit:Compila automáticamente al guardar en tu editor.

Puede definirse el nivel de compresión del CSS.

Settings por proyecto.

Reporta errores.

Actualiza los preprocesadores automáticamente.

Bonus track: ¡Optimiza Imágenes!

Ventajas de los preprocesadores

Ventajas

Mejora el workflow de trabajo.

Produce un código más legible y mantenible.

Tienen una curva de aprendizaje muy amigable.

Prototipado rápido con frameworks como Compass, Bourbon, Foundation o Twitter Bootstrap.

Pero no todo es color de rosa

Desventajas

Si se usan sintaxis extremas luego puede costar volveral CSS normal.

En equipos de varias personas, o todos o nadie.

Si se trabaja en más de un equipo, todos tienen que tenerla misma configuración.

Si no se tiene cuidado puede resultar en un códigoineficiente. ¡DRY!

Sintaxis (SCSS)

Variables

$main: #FF54DC;$sans: Arial, Helvetica, sans-serif;

.finn { border: 1px solid $main; color: $main; font-family: $sans;}.jake { background: $main;}

SCSS:

Variables

.finn { border: 1px solid #FF54DC; color: #FF54DC; font-family: Arial, Helvetica, sans-serif;}.jake { background: #FF54DC;}

CSS:

Nesting

.nav { border: 1px solid #666; padding: 1em; li { float: left; a { text-decoration: none; &:hover { text-decoration: underline; } } }}

SCSS:

Nesting

.nav { border: 1px solid #666; padding: 1em;}.nav li { float: left;}.nav li a { text-decoration: none;}.nav li a:hover { text-decoration: underline;}

CSS:

Mixins

@mixin font($size) { font-size: $size; font-size: $size/16px+0rem;}

/* ======================= */

.finn { @include font(14px);}

SCSS:

Mixins

.finn { font-size: 14px; font-size: 0.875rem;}

CSS:

Mixins

@mixin gradient($color1, $color2, $fall, $start, $end) { background: $fall; background-image: -webkit-gradient(linear, left top, left bottom, color-stop($start,$color1), color-stop($end,$color2)); background-image: -webkit-linear-gradient(top, $color1 $start, $color2 $end); background-image: -moz-linear-gradient(top, $color1 $start, $color2 $end); background-image: -ms-linear-gradient(top, $color1 $start, $color2 $end); background-image: -o-linear-gradient(top, $color1 $start, $color2 $end); background-image: linear-gradient(top, $color1 $start, $color2 $end);}

/* ======================= */

.finn { @include gradient(red,yellow, orange, 0%,100%);}

SCSS:

Mixins

.finn { background: orange; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, yellow)); background-image: -webkit-linear-gradient(top, red 0%, yellow 100%); background-image: -moz-linear-gradient(top, red 0%, yellow 100%); background-image: -ms-linear-gradient(top, red 0%, yellow 100%); background-image: -o-linear-gradient(top, red 0%, yellow 100%); background-image: linear-gradient(top, red 0%, yellow 100%);}

CSS:

Operaciones con colores

.a { color: #F00;}.a:hover { color: lighten(#F00, 20%);}

SCSS:

Operaciones con colores

.a { color: #F00;}.a:hover { color: #FF6666;}

CSS:

Mates

.body {  margin: (14px/2);  top: 50px + 100px;  right: 100px - 50px;  left: 10px * 10px;}

SCSS:

Mates

.body {  margin: 7px;  top: 150px;  right: 50px;  left: 100px;}

CSS:

Y es sólo la punta del icberg

FunctionsConditionalsInterpolation

Grids...

Recursos

PREPROCESADORES:• SASS: http://sass-lang.com/ • LESS: http://lesscss.org/• STYLUS: http://learnboost.github.com/stylus/

HERRAMIENTAS:• CODEKIT: http://incident57.com/codekit/• SCOUT: http://mhs.github.com/scout-app/• LESS APP: http://incident57.com/less/

Recursos

FRAMEWORKS:• COMPASS: http://compass-style.org/• BOURBON: http://thoughtbot.com/bourbon/• ZURB FOUNDATION: http://foundation.zurb.com/• TWITTER BOOTSTRAP: http://twitter.github.com/bootstrap/

GRID SYSTEMS:• SINGULARITY: http://singularity.gs/• SEMANTIC: http://semantic.gs/• SUSY: http://susy.oddbird.net/

¡Gracias!

Imagenes de Adventure Time cortesía de Google y TM & © 2012 Cartoon Network. A Time Warner Company. All Rights Reserved.