Este documento presenta una introducción a Sass (Sintactically Awesome Style Sheets), un preprocesador de CSS que permite utilizar características de programación como variables, anidamiento, importación de archivos, mixins y funciones para facilitar la escritura y mantenimiento de hojas de estilo. Explica cómo instalarlo, su sintaxis SCSS, y características como variables, nested rules, importación de archivos, mixins y extend para reutilizar estilos.

1. una introducción rápida a
Sintactically Awsome Stylesheets
gotardo gonzález
viernes 27 de julio de 12

2. ¿y si...?
:root {
! var-main-color: blue; ¿variables?
} ¿while?
¿for?
h1 { ¿foreach?
! color: $main-color; ¿class?
} ¿funciones?
CSS Variables Module Level 1
Editor's Draft 15 June 2012
http://dev.w3.org/csswg/css-variables/
viernes 27 de julio de 12

3. Sass es un intérprete de sintaxis escrito
en Ruby que nos permite utilizar
recursos propios de los lenguajes de
programación para facilitarnos la
escritura y mantenimiento del código
CSS.
viernes 27 de julio de 12

4. instalación
gem install sass
mv style.css style.scss
sass --watch style.scss:style.css
viernes 27 de julio de 12

5. sintaxis
SaSS vs. SCSS
SaSS SCSS
una sintaxis indentada bloques definidos en llaves
similar a haml idéntica a CSS
ya no tiene soporte
¡nos quedamos
con scss!
viernes 27 de julio de 12

6. nested rules
CSS
Anidar selectores:
#navbar {
width: 80%;
height: 23px;
SCSS }
#navbar ul {
#navbar { list-style-type: none;
width: 80%; }
height: 23px;
#navbar li {
ul { list-style-type: none; } float: left;
li { }
float: left;
a { font-weight: bold; } #navbar li a {
} font-weight: bold;
} }
viernes 27 de julio de 12

7. nested rules
Definir pseudoselectores
con el operador ‘&’ de SaSS
CSS
SCSS
a {
color: #ce4dd6;
}
a:hover {
color: #ffb3ff;
a { }
color: #ce4dd6;
&:hover { color: #ffb3ff; } a:visited {
&:visited { color: #c458cb; } color: #c458cb;
} }
viernes 27 de julio de 12

8. variables :)
SCSS SCSS
$width: 960px; $color: #333;
$margen: 12px;
tr {
.wrapper { color: $color - #111;
width: $width - $margen; }
margin: $margen * 2;
padding: $margen; tr {
border-radius: $margen; color: darken($color, 25%);
} }
viernes 27 de julio de 12

9. @import
mi proyecto style.scss
. @import “reset”;
.. @import “vars”;
_mixins.scss @import “mixins”;
_reset.scss
_vars.scss body {
style.scss background-color: $bgcolor;
color: $color;
wrapper {
width: $width;
}
}
viernes 27 de julio de 12

10. mixins !
CSS
.boton {
border-radius: 5px;
-moz-border-radius: 5px; SCSS
-webkit-border-radius: 5px;
behavior: url(radius.htc); @mixin borderRadius($radius) {
border-radius: 5px;
/* ... */ -moz-border-radius: 5px;
} -webkit-border-radius: 5px;
behavior: url(radius.htc);
.widget { }
border-radius: 5px;
-moz-border-radius: 5px; .boton {
-webkit-border-radius: 5px; @include borderRadius(5px);
behavior: url(radius.htc); }
/* ... */ .widget {
} @include borderRadius(5px);
}
viernes 27 de julio de 12

11. extend !!
SCSS SCSS
.boton { .guardar {
@include border-radius(5px); @extend .boton;
} background-color: #369;
}
.borrar {
@extend .boton;
background-color: #a00;
}
viernes 27 de julio de 12

12. extend !!
SCSS SCSS
.boton { .guardar {
@include border-radius(5px); @extend .boton;
} background-color: #369;
}
.borrar {
@extend .boton;
background-color: #a00;
}
viernes 27 de julio de 12

13. functions !!!! :)_
SCSS
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
Sayonara, <div class=”grid-5”>
viernes 27 de julio de 12

14. y mucho más
for while
$i: 6;
@for $i from 1 through 3 { @while $i > 0 {
.item-#{$i} { .item-#{$i} {
width: 2em * $i; width: 2em * $i;
} }
} $i: $i - 2;
}
each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
viernes 27 de julio de 12

15. y más, y más
Depuración y control de errores:
@debug
@warn
formatos de salida:
:nested
:expanded
:compact
:compressed
viernes 27 de julio de 12

16. Frameworks!
Compass
Basado en SaSS, se puede instalar como gem
http://compass-style.org/
320 and Up
incluye varias opciones de preprocesado
(LESS, SaSS, SaSS + Compass,
ScSS, ScSS + Compass ...)
http://stuffandnonsense.co.uk/projects/320andup/
Foundation 3
tiene una edición escrita en Sass + Compass
http://foundation.zurb.com/docs/gem-install.php
viernes 27 de julio de 12

17. Para saber más...
SaSS Reference
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Pragmatic guide to SaSS
http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass
viernes 27 de julio de 12

18. muchas gracias
Gotardo González
27 / 7 / 2012
viernes 27 de julio de 12