Sass & CompassPor su amigo @leivajd

José Leivaleivajd.com / @leivajd

“Bullets, cabrón, bullets.”

-JESÚS MANUEL OLIVAS

Que sí y que no.

CSS Preprocessors

sass-lang.com

DRYMantenibleAvanzadoPatrones 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 { color: $link; }}

Nesting

Sass

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

Output

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

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: $border-std;}

Output

.foo { color: #e60013; background: #f2e600; border: 1px solid #e60013;}

Sass

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

p { margin-bottom: $spacing; }

Output

p { margin-bottom: 24px;}

Funciones

Sass

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

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

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

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; margin-left: 10px;}

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: border-box; box-sizing: border-box;}

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;

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;

breakpoint-sass.com

singularity.gs

leivajd.com/sass-compassMás en