Sass & Compass - DrupalCamp CR13
•
0 likes•612 views
ݺߣs de la charla sobre Sass y Compass en el DrupalCamp Costa Rica 2013
Sass & Compass - DrupalCamp CR13
- 1. Sass & CompassPor su amigo @leivajd
- 2. José Leiva leivajd.com / @leivajd
- 4. Que sí y que no.
- 11. Sass Syntax
- 12. .sass li color: $brand font-size: $small a color: $link .scss li { color: $brand; font-size: $small; a { color: $link; } }
- 13. Nesting
- 14. Sass .foo { color: #fff; .bar { font-size: 12px; } a { border: 0; } } Output .foo { color: #fff; } .foo .bar { font-size: 12px; } .foo a { border: 0; }
- 15. Sass a { color: #111; &:hover { color: #ccc; } } Output a { color: #111; } a:hover { color: #ccc; }
- 16. Sass h1 { color: #111; .ie-6 & { color: #ccc; } } Output h1 { color: #111; } .ie-6 h1 { color: #ccc; }
- 17. No anidar más de 3 niveles.
- 18. Variables
- 19. Extraer elementos repetidos: colores, font stacks, border defini- tions, etc y volverlos piezas reutilizables.
- 20. Sólo se pueden almacnar valores, no full CSS prop- erties o full selectors.
- 21. 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; }
- 22. Sass $spacing: $line-height; $half-unit: $spacing / 2; $double-unit: $spacing * 2; p { margin-bottom: $spacing; } Output p { margin-bottom: 24px; }
- 23. Funciones
- 24. Sass @function column-width($target, $context: 12) { @return ($target / $context) * 100%; } .foo { width: column-width(7); } .bar { width: column-width(7, 19);
- 25. Mixins
- 26. Almacenar código reutilizable & pasar argumentos para sobreescribir.
- 27. Sass @mixin left($dist) { float: left; margin-left: $dist; } .foo { @include left(10px); } Output .foo { float: left; margin-left: 10px; }
- 28. Usar Mixins cuando CSS sigue un patrón y el output cambia cuando se incluyen nuevos valores.
- 30. compass watch
- 32. Lo cool!
- 33. 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; }
- 34. 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;
- 35. Sass @include replace-text-with-dimensions(“image.png”); Output text-indent: -119988px; overflow: hidden; text-align: left; background-image: url(/slideshow/dccr13-sass/images/image.png); background-repeat: no-repeat; background-position: 50% 50%; width: 300px; height: 400px;
- 37. singularity.gs