Your SlideShare is downloading. ×
0
Sass & CompassPor su amigo @leivajd
José Leiva
leivajd.com / @leivajd
“Bullets, cabrón,
bullets.”
-JESÚS MANUEL OLIVAS
Que sí y
que no.
CSS
Preprocessors
sass-lang.com
DRY
Mantenible
Avanzado
Patrones y proporciones
sass --watch input:output
sass --watch scss:css
Sass Syntax
.sass
li
	 color: $brand
	 font-size: $small
		a
			color: $link
			
.scss
li {
	 color: $brand;
	 font-size: $small;
		a ...
Nesting
Sass
.foo {
color: #fff;
.bar {
font-size: 12px;
}
a {
	 border: 0;
	}
}
Output
.foo {
	 color: #fff;
}
.foo .bar {
	 font...
Sass
a {
	 color: #111;
&:hover {
		color: #ccc;
	}
}
			
Output
a {
	 color: #111;
}		
a:hover {
	 color: #ccc;
}
Sass
h1 {
	 color: #111;
.ie-6 & {
		color: #ccc;
	}
}
			
Output
h1 {
	 color: #111;
}		
.ie-6 h1 {
	 color: #ccc;
}
No anidar más de
3 niveles.
Variables
Extraer elementos
repetidos: colores, font
stacks, border defini-
tions, etc y volverlos
piezas reutilizables.
Sólo se pueden almacnar
valores, no full CSS prop-
erties o full selectors.
Sass
$red: #e60013;
$yellow: #f2e600;
$border-std: 1px solid $red;
.foo {
color: $red;
background: $yellow;
border: $borde...
Sass
$spacing: $line-height;
$half-unit: $spacing / 2;
$double-unit: $spacing * 2;
p {
	 margin-bottom: $spacing;
}
			
Ou...
Funciones
Sass
@function column-width($target, $context: 12) {
@return ($target / $context) * 100%;
}
.foo {
width: column-width(7);...
Mixins
Almacenar código
reutilizable & pasar
argumentos para
sobreescribir.
Sass
@mixin left($dist) {
float: left;
margin-left: $dist;
}
.foo {
@include left(10px);
}
			
Output
.foo {
	 float: left...
Usar Mixins cuando CSS
sigue un patrón y el
output cambia cuando
se incluyen
nuevos valores.
compass-style.org
compass watch
compass-style.org/reference/compass
Lo cool!
Sass
#border-box {
@include box-sizing(border-box);
}
Output
#border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing...
Sass
#border-radius {
@include border-radius(25px);
}
Output
#border-radius {
-webkit-border-radius: 25px;
-moz-border-rad...
Sass
@include replace-text-with-dimensions(“image.png”);
Output
text-indent: -119988px;
overflow: hidden;
text-align: left...
breakpoint-sass.com
singularity.gs
leivajd.com/sass-compass
Más en
Sass & Compass - DrupalCamp CR13
Upcoming SlideShare
Loading in...5
×

Sass & Compass - DrupalCamp CR13

313

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
313
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×