Sass & Compass - DrupalCamp CR13

38
Sass & Compass Por su amigo @leivajd

description

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

Transcript of Sass & Compass - DrupalCamp CR13

Page 1: Sass & Compass - DrupalCamp CR13

Sass & CompassPor su amigo @leivajd

Page 2: Sass & Compass - DrupalCamp CR13

José Leivaleivajd.com / @leivajd

Page 3: Sass & Compass - DrupalCamp CR13

“Bullets, cabrón, bullets.”

-JESÚS MANUEL OLIVAS

Page 4: Sass & Compass - DrupalCamp CR13

Que sí y que no.

Page 5: Sass & Compass - DrupalCamp CR13

CSS Preprocessors

Page 6: Sass & Compass - DrupalCamp CR13
Page 7: Sass & Compass - DrupalCamp CR13

sass-lang.com

Page 8: Sass & Compass - DrupalCamp CR13

DRYMantenibleAvanzadoPatrones y proporciones

Page 9: Sass & Compass - DrupalCamp CR13

sass --watch input:output

Page 10: Sass & Compass - DrupalCamp CR13

sass --watch scss:css

Page 11: Sass & Compass - DrupalCamp CR13

Sass Syntax

Page 12: Sass & Compass - DrupalCamp CR13

.sass

li color: $brand font-size: $small a color: $link

.scss

li { color: $brand; font-size: $small; a { color: $link; }}

Page 13: Sass & Compass - DrupalCamp CR13

Nesting

Page 14: Sass & Compass - DrupalCamp CR13

Sass

.foo { color: #fff; .bar { font-size: 12px; } a { border: 0; }}

Output

.foo { color: #fff;}.foo .bar { font-size: 12px;}.foo a { border: 0;}

Page 15: Sass & Compass - DrupalCamp CR13

Sass

a { color: #111; &:hover { color: #ccc; }}

Output

a { color: #111;} a:hover { color: #ccc;}

Page 16: Sass & Compass - DrupalCamp CR13

Sass

h1 { color: #111; .ie-6 & { color: #ccc; }}

Output

h1 { color: #111;} .ie-6 h1 { color: #ccc;}

Page 17: Sass & Compass - DrupalCamp CR13

No anidar más de 3 niveles.

Page 18: Sass & Compass - DrupalCamp CR13

Variables

Page 19: Sass & Compass - DrupalCamp CR13

Extraer elementos repetidos: colores, font stacks, border defini-tions, etc y volverlos piezas reutilizables.

Page 20: Sass & Compass - DrupalCamp CR13

Sólo se pueden almacnar valores, no full CSS prop-erties o full selectors.

Page 21: Sass & Compass - DrupalCamp CR13

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;}

Page 22: Sass & Compass - DrupalCamp CR13

Sass

$spacing: $line-height;$half-unit: $spacing / 2;$double-unit: $spacing * 2;

p { margin-bottom: $spacing; }

Output

p { margin-bottom: 24px;}

Page 23: Sass & Compass - DrupalCamp CR13

Funciones

Page 24: Sass & Compass - DrupalCamp CR13

Sass

@function column-width($target, $context: 12) { @return ($target / $context) * 100%;}

.foo { width: column-width(7);}

.bar { width: column-width(7, 19);

Page 25: Sass & Compass - DrupalCamp CR13

Mixins

Page 26: Sass & Compass - DrupalCamp CR13

Almacenar código reutilizable & pasar argumentos para sobreescribir.

Page 27: Sass & Compass - DrupalCamp CR13

Sass

@mixin left($dist) { float: left; margin-left: $dist;}

.foo { @include left(10px);}

Output

.foo { float: left; margin-left: 10px;}

Page 28: Sass & Compass - DrupalCamp CR13

Usar Mixins cuando CSS sigue un patrón y el output cambia cuando se incluyen nuevos valores.

Page 29: Sass & Compass - DrupalCamp CR13

compass-style.org

Page 30: Sass & Compass - DrupalCamp CR13

compass watch

Page 31: Sass & Compass - DrupalCamp CR13

compass-style.org/reference/compass

Page 32: Sass & Compass - DrupalCamp CR13

Lo cool!

Page 33: Sass & Compass - DrupalCamp CR13

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;}

Page 34: Sass & Compass - DrupalCamp CR13

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;

Page 35: Sass & Compass - DrupalCamp CR13

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;

Page 36: Sass & Compass - DrupalCamp CR13

breakpoint-sass.com

Page 37: Sass & Compass - DrupalCamp CR13

singularity.gs

Page 38: Sass & Compass - DrupalCamp CR13

leivajd.com/sass-compassMás en