Sass & Compass: CSS y su viaje en acidos

Breve recorrido por las caracteristicas mas interesantes de Sass & Compass. Este presentacion fue realizada en el marco del primer evento de @wuliaconw.

Transcript

1. SASS & COMPASS CSS y su viaje en ácidos.
2. QUIÉN SOY @mbavio
3. CSS YA NO ES suficiente
4. PROBLEMAS QUE TRAEN soluciones
5. FRAMEWORKS
6. METODOLOGÍAS OOCSS
7. PREPROCESADORES
9. Sass extiende CSS3 con variables, operaciones, mixins y mucho más. Sass makes CSS fun again.
10. OPCIONES DE sintaxis
11. .scss .movie { margin-top: 20px; h2 { font-size: 18px; } }
12. .sass .movie margin-top: 20px h2 font-size: 18px
13. NESTING
14. .scss .movie { margin-top: 20px; h2 { font-size: 18px; } } .css .movie { margin-top: 20px; } .movie h2 { font-size: 18px; }
15. .scss a { color: blue; &:hover { color: green; } } .css a { color: blue; } a:hover { color: green; } & Referencia a los selectores padres de una regla.
16. VARIABLES
17. 5TIPOS DE VARIABLES Números 10, 7.3, 40%, 13px Texto hola mundo, “hola gente” Colores #fff, rgba(0, 10, 10, 0.4) Booleanos true ó false Listas 4px 8px 10px
18. .scss $link-color: blue; $link-hover-color: green; a { color: $link-color; &:hover { color: $link-hover-color; } } .css a { color: blue; } a:hover { color: green; }
19. MIXINS
20. .scss @mixin border-radius($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } @mixin LIBRERÍA CON
21. @mixin LIBRERÍA CON .css .box{ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
22. @EXTEND
23. .scss .naked-list { list-style: none; padding: 0; margin: 0; } .my-list{ @extend .naked-list; color: #666; } @extend HERENCIA CON
24. @extend HERENCIA CON .css .naked-list, .my-list{ list-style: none; padding: 0; margin: 0; } .my-list{ color: #666; }
25. OPERACIONES
26. 20px + 10px; // 30px 20px - 10px; // 10px 1in + 72pt; // 2in 5em * 4; // 20em 12 % 5; // 2 +-*/% OPERACIONES MATEMÁTICAS
27. $base: 40px; font: 12px / 1.5em; // 12px/1.5em font: (40px / 4 ); // 10px font: 40px / 4 + 1; // 11px font: $base / 4; // 10px $val: 40px / 4; // 10px DIVISIÓN LA
28. .scss $full: 960px; $body: 600px; $gutter: 60px; .sidebar { width: $full- $body - $gutter; } .css .sidebar { width: 300px; }
29. LÓGICA
30. OPERADORES lógicos 1 < 2 // true 10 > 11 // false 4 <= 7 // true 12 >= 6 // false 3 - 2 == 1 // true arial != arial // false #fff == white // true
31. if $momento = dia; body { @if $momento == dia { background-color: #fff; } @else if $momento == noche { background-color: #000; } } .scss
32. if body { background-color: #fff; } .css
33. if $bg = #000; body { color: if($bg == black, #fff, #000); } LA FUNCIÓN .scss
34. if body { color: #fff; } LA FUNCIÓN .css
35. for @for $i from 1 to 5 { .col-#{$i} { margin-left: $i * 50px; } } .scss
36. for .col-1 { margin-left: 50px; } .col-2 { margin-left: 100px; } .col-3 { margin-left: 150px; } .col-4 { margin-left: 200px; } .css
37. for @for $i from 1 through 5 { .col-#{$i} { margin-left: $i * 50px; } } .scss
38. for .col-1 { margin-left: 50px; } .col-2 { margin-left: 100px; } .col-3 { margin-left: 150px; } .col-4 { margin-left: 200px; } .col-5 { margin-left: 250px; } .css
39. while $i: 1; @while $i < 5 { .col-#{$i + 1} { margin-left: $i * 50px; } $i = $i + 1; } .scss
40. while .col-1 { margin-left: 50px; } .col-2 { margin-left: 100px; } .col-3 { margin-left: 150px; } .col-4 { margin-left: 200px; } .css
41. each $ciclotimia: bien, mal, maso; @each $estado in $ciclotimia { .#{$estado}-icon { background: url(‘#{$estado}.png’); } } .scss
42. each .bien-icon { background: url(‘bien.png’); } .mal-icon { background: url(‘mal.png’); } .maso-icon { background: url(‘maso.png’); } .css
43. COLOR
44. COLORES cambiando $color = blue; invert($color); // #ffff00 complement($color); // #ffff00 mix($color, red); // #7f007f grayscale($color); // #808080
45. .scss a { color: rgba(red, 0.75) }; p { color: rgba(#000, 0.8) }; .css a { color: rgba(255, 0, 0, 0.75) }; p { color: rgba(0, 0, 0, 0.8) }; RED GREEN BLUE ALPHA rgba
46. FUNCIONES $color = blue; red($color); // 0 green($color); // 0 blue($color); // 0 alpha($color); // 1 rgba
47. HUE LIGHTNESS SATURATION ALPHA hsla Relaciones más significativas entre colores. hsla(36, 73%, 10%, 1) desaturar 40% hsl(36, 33%, 10%, 1) rgba(44, 29, 7, 1) desaturar 40% rgba(34, 27, 17, 1) #2C1D07 desaturar 40% #221B11
48. hsla FUNCIONES $color = blue; hue($color); // 240deg saturation($color); // 100% lightness($color); // 50% alpha($color); // 1 adjust-hue($color, 90); // #ff0080 adjust-hue($color, -90); // #00ff80 saturate($color, 40%); // #0000ff desaturate($color, 40%); // #3333cc lighten($color, 20%); // #6666ff darken($color, 20%); // #000099 fade-in($color, 0.5); // #0000ff fade-out($color, 0.5); // rgba(0, 0, 255, 0.5)
49. Funciones GENERALES change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]); adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]); scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]);
50. @IMPORT
51. CSS IMPORTANDO CON @import url(reset.css); @import url(colores.css); @import url(tipografia.css); CSS padre + 3 @imports = 4 peticiones http!
52. SASS IMPORTANDO CON @import “reset”; // _reset.scss @import “colores”; // _colores.scss @import “tipografia”; // _tipografia.scss Se importa cuando se compila = 1 solo css, 1 peticion http!
53. RWD
54. .scss #wrapper { width: 96em; @media screen and (max-width: 1280px) { width: 48em; } } @media RWD CON Las reglas @media tienen en cuenta al contexto.
55. #wrapper { width: 96em; } @media screen and (max-width: 1280px) { #wrapper { width: 48em; } } @media RWD CON Las reglas @media tienen en cuenta al contexto. .css
57. Librería de mixins Funciones de SASS Extensiones Creación de extensiones propias
58. COMPASS MIXINS
59. CSS3 animation, appearance, background-clip, background-origin, background-size, border-radius, box, box-shadow, box-sizing, columns, font-face, images, inline-block, opacity, css regions, text-shadow, transform, transition. Layout Grid background, sticky footer, stretching. Tipografía Links, lists, text, vertical rhythm. Utilidades Links, lists, text, color, general, reset, sprites, tables.
60. .scss .box { @include border-radius(10px); } .css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
61. .scss .box { @include border-radius(10px); } .css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } CSS3 COMPASS
62. SPRITES COMPASS Genera la imagen de sprites Genera el CSS Actualiza automaticamente
63. SPRITES COMPASS .scss @import "iconos/*.png"; @include all-iconos-sprites; .css .iconos-sprite, .iconos-delete, .iconos-edit, .iconos-new, .iconos-save { background: url('/images/iconos-s34fe0604ab.png') no-repeat; } .iconos-delete { background-position: 0 0; } .iconos-edit { background-position: 0 -32px; } .iconos-new { background-position: 0 -64px; } .iconos-save { background-position: 0 -96px; }
64. EXTENSIONES COMPASS Fancy Buttons => botones en CSS3 RGBApng => alpha pngs desde SASS Compass Magick => gradientes en png desde SASS Susy => Grillas responsive muchos más...
65. todo lindo, pero COMO LO INSTALO
66. RUBY INSTALAR OSX Instalado por defecto! LINUX sudo apt-get install ruby irb rdoc WINDOWS RubyInstaller
67. $ sudo gem install sass --pre $ sudo gem install compass --pre $ compass create <project-name> $ compass watch <project-name> CONSOLA AMO LA
68. CONSOLA ODIO LA Live Reload ($9.99) CodeKit ($20) Compass.app ($10) Scout.app ($0)
70. Gracias.