Sass & CompassFORMACIÓN ARTVISUAL 2013

Javier Arques @javiarques

Preprocesador de CSS que añade funcionalidades típicas de un

lenguaje de programación:

Variables, herencia, funciones, ...

.scss .css

Librería de extensiones y utilidades para sass

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

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

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

@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

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

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

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

@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

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;

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

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