Logo SASS

SASS es una preprocesador CSS el cual, como su propia web indica, le otorga superpoderes a nuestros estilos. Por un lado te permite utilizar estilos futuros o que aun no son compatibles es todos los navegadores. Por otro lado puedes tener variables, hacer operaciones, importar otros CSS, incrustar estilos dentro de otros estilos, ayudarte a calcular colores… y un largo etcétera. Sin duda un indispensable para cualquier Diseñador Web que se precie.

A continuación dejo un breve repaso de sus características que ayudará a nuevos y a la memoria de los veteranos.

Variables

SASS

$fuenteGeneral: Helvetica, sans-serif
$colorFondo: #333

body
   font-family: $fuenteGeneral
   background-color: $colorFondo

compila a…

CSS

body {
    font-family: Helvetica, sans-serif;
    background-color: #333;
}

Jerarquización

SASS

nav
    ul
        margin: 0
        padding: 0
        list-style: none
    li
        display: inline-block
    a
        display: block
        padding: 6px 12px
        text-decoration: none

compila a…

CSS

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

SASS

div
    text-decoration: none
    &:hover
        color: pink

compila a…

CSS

div {
    text-decoration: none;
}

div:hover {
    color: pink;
}

Importaciones

SASS

Creamos un fichero con el nombre _reset.scss

html, body, ul, ol
    margin: 0
    padding: 0

Otro con el nombre base.scss

@import "reset"

body
    font-size: 14px
    background-color: #efefef

Ambos se compilarán en…

CSS

html, body, ul, ol {
    margin: 0;
    padding: 0;
}

body {
    font-size: 14px;
    background-color: #efefef;
}

Mixins

SASS

@mixin tamanyo($anchura)
    width: $anchura

.box
    @include tamanyo(10px)
    height: 50px

compila a…

CSS

.box {
    width: 10px;
    height: 50px;
}

Alternativa con dos parámetros de entrada.

SASS

@mixin tamanyo($anchura, $altura)
    width: $anchura
    height: $altura

Definiendo un valor por defecto.

@mixin tamanyo($anchura, $altura:50px)
    width: $anchura
    height: $altura

Extender

SASS

.redesSociales
    border: 1px solid #ccc
    padding: 10px
    color: #333

#twitter
    @extend .redesSociales
    background-image: url(../img/twitter.png)

compila a…

CSS

.redesSociales {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

#twitter {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
    background-image: url(../img/twitter.png);
}

Operadores

Valores que podemos utilizar:

Símbolo Descripción
+ Sumar
- Restar
* Multiplicar
/ Dividir
% Resto de la división

SASS

#banner
    float: left
    width: 600px / 960px * 100%

compila a…

CSS

#banner {
    float: left;
    width: 62.5%;
}

Desglose

SASS

#banner
    float: left
    backgroud:
        color: navy
        size: cover
        position: center

CSS

#banner {
    float: left;
    backgroud-color: navy;
    backgroud-size: cover;
    backgroud-position: center;
}

Funciones de ayuda

darken(#800, 20%)
// #200

lighten(#800, 20%)
// #e00

transparentize(#e48400, .2)
// rgba(228, 132, 0, 0.8)

rgba(#e48400, .2)
// rgba(228, 132, 0, 0.2)

saturate(#855, 20%)
// #9e3f3f

grayscale(#855)
// #726b6b

complement(#855)
// #588

Compilar

Para instalar el compilador puedes usar el siguiente comando.

yarn global add node-sass

Ejecutarlo es sencillo.

node-sass <entrada> <salida>

Un ejemplo.

node-sass main.sass main.css