Lección 24: 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.

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.sass

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

Otro con el nombre base.sass

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

Cuando quieras utilizar variables, funciones o mixins alojados en otro fichero, deberás trabajar con la estructura de fichero.propiedad.

_theme.sass

$color--primario: red

base.sass

@use "theme"

a
    color: theme.$color--primario

No utilices @import ya que se encuentra descontinuado y esta desaconsejado por los desarrolladores. Se debe a que produce colisiones entre las variables ya que todo se vuelve global, incluyendo funciones y mixins.

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

El navegador es incapaz de interpretar SASS, por ello necesitamos transformarlo en CSS. Para compilar tenemos un multitud de opciones, tanto libres, gratuitas o de pago; y para todos los sistemas operativos.

Prepos (Pago): Mi favorita: rápido de usar, altamente configurable, lleva preinstalado un servidor web con autorecarga, admite otros compiladores (Typescript, CoffeScript, Pug, Slim…), y te deja crear flujos de compilación (¿Te suena Gulp? Pues de forma gráfica). De profesionales para profesionales.
Koala (Open Source): Sencillo de usar y apto para todas las plataformas. He tenido buenas experiencias en Windows pero no en Mac OS.
CodeKit (Pago): Si tienes Mac OS no pierdas la oportunidad de investigarlo. Realiza varias tareas interesantes como optimizar imágenes.
Scout-App (Open Source): Similar a Koala. Arrastrar la carpeta donde esta tu web y listo.

En el caso de querer usar el terminal, necesitarás el paquete de npm/yarn node-sass.

Para instalar el compilador puedes usar el siguiente comando.