Sass & Compass - DrupalCamp CR13

549 views

Published on

Slides de la charla sobre Sass y Compass en el DrupalCamp Costa Rica 2013

Published in: Design
  • Be the first to comment

  • Be the first to like this

Sass & Compass - DrupalCamp CR13

  1. 1. Sass & CompassPor su amigo @leivajd
  2. 2. José Leiva leivajd.com / @leivajd
  3. 3. “Bullets, cabrón, bullets.” -JESÚS MANUEL OLIVAS
  4. 4. Que sí y que no.
  5. 5. CSS Preprocessors
  6. 6. sass-lang.com
  7. 7. DRY Mantenible Avanzado Patrones y proporciones
  8. 8. sass --watch input:output
  9. 9. sass --watch scss:css
  10. 10. Sass Syntax
  11. 11. .sass li color: $brand font-size: $small a color: $link .scss li { color: $brand; font-size: $small; a { color: $link; } }
  12. 12. Nesting
  13. 13. Sass .foo { color: #fff; .bar { font-size: 12px; } a { border: 0; } } Output .foo { color: #fff; } .foo .bar { font-size: 12px; } .foo a { border: 0; }
  14. 14. Sass a { color: #111; &:hover { color: #ccc; } } Output a { color: #111; } a:hover { color: #ccc; }
  15. 15. Sass h1 { color: #111; .ie-6 & { color: #ccc; } } Output h1 { color: #111; } .ie-6 h1 { color: #ccc; }
  16. 16. No anidar más de 3 niveles.
  17. 17. Variables
  18. 18. Extraer elementos repetidos: colores, font stacks, border defini- tions, etc y volverlos piezas reutilizables.
  19. 19. Sólo se pueden almacnar valores, no full CSS prop- erties o full selectors.
  20. 20. Sass $red: #e60013; $yellow: #f2e600; $border-std: 1px solid $red; .foo { color: $red; background: $yellow; border: $border-std; } Output .foo { color: #e60013; background: #f2e600; border: 1px solid #e60013; }
  21. 21. Sass $spacing: $line-height; $half-unit: $spacing / 2; $double-unit: $spacing * 2; p { margin-bottom: $spacing; } Output p { margin-bottom: 24px; }
  22. 22. Funciones
  23. 23. Sass @function column-width($target, $context: 12) { @return ($target / $context) * 100%; } .foo { width: column-width(7); } .bar { width: column-width(7, 19);
  24. 24. Mixins
  25. 25. Almacenar código reutilizable & pasar argumentos para sobreescribir.
  26. 26. Sass @mixin left($dist) { float: left; margin-left: $dist; } .foo { @include left(10px); } Output .foo { float: left; margin-left: 10px; }
  27. 27. Usar Mixins cuando CSS sigue un patrón y el output cambia cuando se incluyen nuevos valores.
  28. 28. compass-style.org
  29. 29. compass watch
  30. 30. compass-style.org/reference/compass
  31. 31. Lo cool!
  32. 32. Sass #border-box { @include box-sizing(border-box); } Output #border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  33. 33. Sass #border-radius { @include border-radius(25px); } Output #border-radius { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px;
  34. 34. Sass @include replace-text-with-dimensions(“image.png”); Output text-indent: -119988px; overflow: hidden; text-align: left; background-image: url(../images/image.png); background-repeat: no-repeat; background-position: 50% 50%; width: 300px; height: 400px;
  35. 35. breakpoint-sass.com
  36. 36. singularity.gs
  37. 37. leivajd.com/sass-compass Más en

×