Tutorial sobre Sass y Compass para principiantes hecho para la formación de Artvisual.net

1. Sass & Compass
FORMACIÓN ARTVISUAL 2013
Javier Arques @javiarques

2. Preprocesador de CSS
que añade funcionalidades típicas de un
lenguaje de programación:
Variables, herencia, funciones, ...
.scss .css

3. Librería de extensiones y utilidades
para sass

4. NESTING (ANIDAMIENTO)
Te permite anidar dentro de un mismo padre todo el código ( nav, nav ul, nav ul li, ...)
También se puede anidar propiedades (border, font, ...)
Se usa & para acceder al padre &:hover
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
a{
color: red;
&:hover{
color: green;
}
}
}
.scss
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
li a{
color: red;
}
li a:hover{
color: green;
}
.css

5. VARIABLES
Variables begin with $ and are declared just like properties.
They can have any value that’s allowed for a CSS property, such
as colors, numbers (with units), or text.
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
.scss
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
.css

6. MIXINS
Reutilizar código, con o sin parámetros
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist: 30px) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
.scss
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
.css

7. @import
Crea tantos ficheros .scss como quieras y únelos en un único
fichero en servidor
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}:
$radius;
-webkit-border-#{$vert}-#{$horz}-radius:
$radius;
}
_rounded.scss #navbar li {
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius:
10px; }
#footer {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
#sidebar {
border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
}
.css
@import "rounded";
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
#sidebar { @include rounded(top, left, 8px); }
styles.scss

8. Interpolation
Para usar el nombre de la propiedad #{variable}
$posicion_borde: left;
@mixin coche($marca, $color){
.coche.#{$marca}{
border-#{$posicion_borde}: 2px;
background-color: $color;
background-image: url
('images/#{$marca}-#{$color}.jpg')
}
}
@include coche('audi', 'green');
style.scss
.coche.audi {
border-left: 2px;
background-color: "green";
background-image: url
("images/audi-green.jpg"); }
style.css

9. Operations & Functions
Operaciones con números: +, -, *, /, %
Funciones de color: lighten, darken, rgba
#navbar {
$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;
width: $navbar-width;
border-bottom: 2px solid $navbar-color;
li {
float: left;
width: $navbar-width/$items - 10px;
background-color:
lighten($navbar-color, 20%);
&:hover {
background-color:
lighten($navbar-color, 10%);
}
}
}
style.scss
#navbar {
width: 800px;
border-bottom: 2px solid #ce4dd6; }
#navbar li {
float: left;
width: 150px;
background-color: #e5a0e9; }
#navbar li:hover {
background-color: #d976e0; }
style.css

10. @if @each @for @while
@each $animal in puma, sea-slug, egret {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.
png');
}
}
style.scss
.puma-icon {
background-image: url("/images/puma.png"); }
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png"); }
style.css
$animal: gato;
p {
@if 1 + 1 == 2 {border: 2px solid black}
@if $animal == gato {
color: blue;
} @else if $animal == perro {
color: red;
} @else if $animal == caballo {
color: green;
} @else {
color: black;
}
}
p {
border: 2px solid black;
color: blue; }
@for $i from 1 to 3 {
.todos-#{$i} { width: 2em * $i; }
}
.todos-1 { width: 2em; }
.todos-2 { width: 4em; }

11. @extend
Herencia entre clases
.alerta {
background: orange;
display: block;
font-weight: bold;
}
.alertaCritica{
@extend .alerta;
background: red;
}
style.scss
.alerta, .alertaCritica {
background: orange;
display: block;
font-weight: bold; }
.alertaCritica {
background: red; }
style.css

13. Compilar sass
Colección de mixins CSS3 (no más prefijos!)
@include box-shadow(red 2px 2px 10px); }
-webkit-box-shadow: red 2px 2px 10px;
-moz-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
Helpers (clearfix, float, hacks)
Sprites
images/my-icons/new.png
images/my-icons/edit.png
images/my-icons/save.png
images/my-icons/delete.png
@import "my-icons/*.png";
@include all-my-icons-sprites;

14. Instalación y uso
Sass y compass son dos gemas de Ruby
gem install compass // INSTALAR COMPASS & SASS
compass create nombre_proyecto // CREA UN FICHERO config.rb
compass watch // Autocompila los .scss -> .css

15. config.rb
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
# You can select your preferred output style here:
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors.
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass