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

1. Sass & CompassPor su amigo @leivajd

2. José Leiva
leivajd.com / @leivajd

3. “Bullets, cabrón,
bullets.”
-JESÚS MANUEL OLIVAS

4. Que sí y
que no.

5. CSS
Preprocessors

7. sass-lang.com

8. DRY
Mantenible
Avanzado
Patrones y proporciones

9. sass --watch input:output

10. sass --watch scss:css

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.

29. compass-style.org

30. compass watch

31. compass-style.org/reference/compass

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(../images/image.png);
background-repeat: no-repeat;
background-position: 50% 50%;
width: 300px;
height: 400px;

36. breakpoint-sass.com

37. singularity.gs

38. leivajd.com/sass-compass
Más en