sass & compass - drupalcamp cr13
Post on 13-Jun-2015
345 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related