CSS Preprocessors Time!    - with SASS, LESS and Stylus -           (and Finn and Jake)                                   ...
Hola.           Soy        Nahuel Sotelo            @nahuelsotelo        machaco teclados en
¿Qué son?Una forma más eficiente de escribir CSS.
¿Qué son?            .scss / .less / .styl                   COMPILA                    .css
¿Qué necesitopara empezar?
¿Qué necesito?   Un archivo de texto con una extensión determinada   (.scss, .less, .styl).   Un editor de código que reco...
¿Qué necesito?   Hay varias maneras de compilar:   En servidor (ruby)   En cliente (JavaScript)   En local (Compass, Codek...
¿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....
Ventajas de lospreprocesadores
Ventajas   Mejora el workflow de trabajo.   Produce un código más legible y mantenible.   Tienen una curva de aprendizaje m...
Pero no todo es color de rosa
Desventajas   Si se usan sintaxis extremas luego puede costar volver   al CSS normal.   En equipos de varias personas, o t...
Sintaxis (SCSS)
VariablesSCSS:   $main: #FF54DC;   $sans: Arial, Helvetica, sans-serif;   .finn {      border: 1px solid $main;      color:...
VariablesCSS:   .finn {      border: 1px solid #FF54DC;      color: #FF54DC;      font-family: Arial, Helvetica, sans-serif...
NestingSCSS:   .nav {      border: 1px solid #666;      padding: 1em;      li {           float: left;           a{        ...
NestingCSS:   .nav {      border: 1px solid #666;      padding: 1em;   }   .nav li {      float: left;   }   .nav li a {   ...
MixinsSCSS:   @mixin font($size) {     font-size: $size;     font-size: $size/16px+0rem;   }   /* ======================= ...
MixinsCSS:   .finn {     font-size: 14px;     font-size: 0.875rem;   }
MixinsSCSS:   @mixin gradient($color1, $color2, $fall, $start, $end) {      background: $fall;      background-image: -web...
MixinsCSS:   .finn {      background: orange;      background-image: -webkit-gradient(linear, left top, left bottom, color-...
Operaciones con coloresSCSS:   .a {      color: #F00;   }   .a:hover {      color: lighten(#F00, 20%);   }
Operaciones con coloresCSS:   .a {      color: #F00;   }   .a:hover {      color: #FF6666;   }
MatesSCSS:   .body {     margin: (14px/2);     top: 50px + 100px;     right: 100px - 50px;     left: 10px * 10px;   }
MatesCSS:   .body {     margin: 7px;     top: 150px;     right: 50px;     left: 100px;   }
Y es sólo lapunta del icberg     Functions   Conditionals   Interpolation       Grids         ...
Recursos      PREPROCESADORES:  •   SASS: http://sass-lang.com/  •   LESS: http://lesscss.org/  •   STYLUS: http://learnbo...
Recursos      FRAMEWORKS:  •   COMPASS: http://compass-style.org/  •   BOURBON: http://thoughtbot.com/bourbon/  •   ZURB F...
¡Gracias!Imagenes de Adventure Time cortesía de Google y TM & © 2012 Cartoon Network. A Time Warner Company. All Rights Re...
Upcoming SlideShare
Loading in...5
×

"CSS Preprocessors Time!" por @nahuelsotelo

1,348

Published on

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/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,348
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

"CSS Preprocessors Time!" por @nahuelsotelo

  1. 1. CSS Preprocessors Time! - with SASS, LESS and Stylus - (and Finn and Jake) @nahuelsotelo
  2. 2. Hola. Soy Nahuel Sotelo @nahuelsotelo machaco teclados en
  3. 3. ¿Qué son?Una forma más eficiente de escribir CSS.
  4. 4. ¿Qué son? .scss / .less / .styl COMPILA .css
  5. 5. ¿Qué necesitopara empezar?
  6. 6. ¿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.
  7. 7. ¿Qué necesito? Hay varias maneras de compilar: En servidor (ruby) En cliente (JavaScript) En local (Compass, Codekit, Scout, less.app)
  8. 8. ¿Qué necesito? Mi recomendación:
  9. 9. ¿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!
  10. 10. Ventajas de lospreprocesadores
  11. 11. 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.
  12. 12. Pero no todo es color de rosa
  13. 13. Desventajas Si se usan sintaxis extremas luego puede costar volver al CSS normal. En equipos de varias personas, o todos o nadie. Si se trabaja en más de un equipo, todos tienen que tener la misma configuración. Si no se tiene cuidado puede resultar en un código ineficiente. ¡DRY!
  14. 14. Sintaxis (SCSS)
  15. 15. VariablesSCSS: $main: #FF54DC; $sans: Arial, Helvetica, sans-serif; .finn { border: 1px solid $main; color: $main; font-family: $sans; } .jake { background: $main; }
  16. 16. VariablesCSS: .finn { border: 1px solid #FF54DC; color: #FF54DC; font-family: Arial, Helvetica, sans-serif; } .jake { background: #FF54DC; }
  17. 17. NestingSCSS: .nav { border: 1px solid #666; padding: 1em; li { float: left; a{ text-decoration: none; &:hover { text-decoration: underline; } } } }
  18. 18. NestingCSS: .nav { border: 1px solid #666; padding: 1em; } .nav li { float: left; } .nav li a { text-decoration: none; } .nav li a:hover { text-decoration: underline; }
  19. 19. MixinsSCSS: @mixin font($size) { font-size: $size; font-size: $size/16px+0rem; } /* ======================= */ .finn { @include font(14px); }
  20. 20. MixinsCSS: .finn { font-size: 14px; font-size: 0.875rem; }
  21. 21. MixinsSCSS: @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%); }
  22. 22. MixinsCSS: .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%); }
  23. 23. Operaciones con coloresSCSS: .a { color: #F00; } .a:hover { color: lighten(#F00, 20%); }
  24. 24. Operaciones con coloresCSS: .a { color: #F00; } .a:hover { color: #FF6666; }
  25. 25. MatesSCSS: .body {   margin: (14px/2);   top: 50px + 100px;   right: 100px - 50px;   left: 10px * 10px; }
  26. 26. MatesCSS: .body {   margin: 7px;   top: 150px;   right: 50px;   left: 100px; }
  27. 27. Y es sólo lapunta del icberg Functions Conditionals Interpolation Grids ...
  28. 28. 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/
  29. 29. 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/
  30. 30. ¡Gracias!Imagenes de Adventure Time cortesía de Google y TM & © 2012 Cartoon Network. A Time Warner Company. All Rights Reserved.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×