"css preprocessors time!" por @nahuelsotelo
DESCRIPTION
Presentación realizada en el #webcat Barcelona de Agosto del 2012 Autor: Nahuel Sotelo (@nahuelsotelo) ------------------------------------------------ RECURSOS: - SASS http://sass-lang.com/ - LESS http://lesscss.org/ - Stylus http://learnboost.github.com/stylus/ - Codekit http://incident57.com/codekit/ - Scout http://mhs.github.com/scout-app/ - LESS App http://incident57.com/less/ - Compass http://compass-style.org/ - Bourbon http://thoughtbot.com/bourbon/ - ZURB Foundation http://foundation.zurb.com/ - Twitter Bootstrap http://twitter.github.com/bootstrap/ - Singularity http://singularity.gs/ - Semantic grid system http://semantic.gs/ - Susy http://susy.oddbird.net/TRANSCRIPT
![Page 1: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/1.jpg)
CSS Preprocessors Time!- with SASS, LESS and Stylus -
(and Finn and Jake)
@nahuelsotelo
![Page 2: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/2.jpg)
Hola.Nahuel Sotelo
Soy
machaco teclados en
@nahuelsotelo
![Page 3: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/3.jpg)
¿Qué son?
Una forma más eficiente de escribir CSS.
![Page 4: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/4.jpg)
¿Qué son?
.scss / .less / .styl
.css
COMPILA
![Page 5: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/5.jpg)
¿Qué necesito para empezar?
![Page 6: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/6.jpg)
¿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.
![Page 7: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/7.jpg)
Hay varias maneras de compilar:
En servidor (ruby)
En cliente (JavaScript)
En local (Compass, Codekit, Scout, less.app)
¿Qué necesito?
![Page 8: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/8.jpg)
¿Qué necesito?
Mi recomendación:
![Page 9: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/9.jpg)
¿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!
![Page 10: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/10.jpg)
Ventajas de los preprocesadores
![Page 11: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/11.jpg)
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.
![Page 12: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/12.jpg)
Pero no todo es color de rosa
![Page 13: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/13.jpg)
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!
![Page 14: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/14.jpg)
Sintaxis (SCSS)
![Page 15: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/15.jpg)
Variables
$main: #FF54DC;$sans: Arial, Helvetica, sans-serif;
.finn { border: 1px solid $main; color: $main; font-family: $sans;}.jake { background: $main;}
SCSS:
![Page 16: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/16.jpg)
Variables
.finn { border: 1px solid #FF54DC; color: #FF54DC; font-family: Arial, Helvetica, sans-serif;}.jake { background: #FF54DC;}
CSS:
![Page 17: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/17.jpg)
Nesting
.nav { border: 1px solid #666; padding: 1em; li { float: left; a { text-decoration: none; &:hover { text-decoration: underline; } } }}
SCSS:
![Page 18: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/18.jpg)
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:
![Page 19: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/19.jpg)
Mixins
@mixin font($size) { font-size: $size; font-size: $size/16px+0rem;}
/* ======================= */
.finn { @include font(14px);}
SCSS:
![Page 20: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/20.jpg)
Mixins
.finn { font-size: 14px; font-size: 0.875rem;}
CSS:
![Page 21: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/21.jpg)
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:
![Page 22: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/22.jpg)
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:
![Page 23: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/23.jpg)
Operaciones con colores
.a { color: #F00;}.a:hover { color: lighten(#F00, 20%);}
SCSS:
![Page 24: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/24.jpg)
Operaciones con colores
.a { color: #F00;}.a:hover { color: #FF6666;}
CSS:
![Page 25: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/25.jpg)
Mates
.body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10px * 10px;}
SCSS:
![Page 26: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/26.jpg)
Mates
.body { margin: 7px; top: 150px; right: 50px; left: 100px;}
CSS:
![Page 27: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/27.jpg)
Y es sólo la punta del icberg
FunctionsConditionalsInterpolation
Grids...
![Page 28: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/28.jpg)
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/
![Page 29: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/29.jpg)
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/
![Page 30: "CSS Preprocessors Time!" por @nahuelsotelo](https://reader033.vdocumento.com/reader033/viewer/2022060109/5554affab4c905fd608b5500/html5/thumbnails/30.jpg)
¡Gracias!
Imagenes de Adventure Time cortesía de Google y TM & © 2012 Cartoon Network. A Time Warner Company. All Rights Reserved.