Sass

Conceptos generales

Limitaciones del CSS

CSS no es un lenguaje de programación:
- No permite herencia
- No dispone de variables
- Las páginas de estilos se pueden volver complejas

¿Qué es Sass?

Sass significa Syntactically Awesome Stylesheets
Es un lenguaje de preprocesado
- El navegador solo entiende CSS
- Si utilizamos cualquier otro lenguaje de estilos habrá que compilarlo a CSS

Ficheros

La extensión de los ficheros es .scss (sassy css) y .sass
Nos centraremos en .scss (el más parecido a css)
Un ficheros .scss puede contener también código css

Como escribir Sass

Nos centraremos en escribir código css
Incorporamos técnicas de Sass cuando nos venga bien
Si utilizamos librerías de terceros:
- Preferimos código Sass a CSS:
  - Se entiende mejor
  - Es más fácil de modificar

Sintáxis

Comentarios

// este comentario no se verá
// cuando compilemos nuestro fichero sass a css
/* pero este otro sí */

Importar ficheros

En css se evita el uso de @import ya que el código es síncrono y provoca bloqueos
En sass da igual porque se va a compilar

Fichero aplication.scss:

/* Mi hoja de estilos */
// tendrá el contenido de todo el css de mi aplicación 
// dividido en varios ficheros scss para tener todo organizado
// No hace falta extensión, se sobreentiende scss
@import "buttons";
@import "labels";
...

Al compilar se generará un único fichero aplication.css
- Incluye el fichero buttons.scss y labels.scss

Partials

El compilador también genera los ficheros buttons.css y labels.css
Para evitar que se generen se pueden definir como partials:
- Basta con renombrarlos a _buttons.scss y _labels.scss
- Solo se compilaran como parte de otro fichero
El import no hace falta tocarlo, @import "buttons puede importar:
- buttons.sass
- button.scss
- _buttons.sass
- _button.scss

Selectores anidados

#header {
  height: 72px;
  background: $header-background-color;
  h1 {
    color: white;
    a {
      display: block;
      text-decoration: none;
    }
  }

No se debe abusar del anidado
- Complica la reusabilidad del código
- Lo mismo que en css con los selectores descendentes

Propiedades anidadas

.btn {
    text: {
          decoration: underline;
          transform: lowercase;
  }
}

Selector padre: &

.btn {
  &.btn-large {
    width: 100px;
    // seleccionamos elementos que tengan class="btn btn-large"
  }
}

Muy útil para pseudoclases:

a {
  text-decoration: none;
  &:hover { color: #ccc}
  &:active {color: #ddd}
}

Variables

$base-color: rgba(blue, 0.5);
$back-color: red !default;

body {
  color: $base-color;
  background-color: #back-color;
}

La fuente en el body será de color azul
El color de los párrafos será rojo en caso de no haberse definido previamente
El ámbito de las variables la definen las llaves
- Si no existen, serán variables globales

Otro ejemplo:

/*app.scss*/
$rounded: 5px;
@import "buttons"

/*_buttons.scss*/
$rounded: 3px !default;
.btn {
  border-radius: $rounded;
}

Interpolación

Podemos definir un selector o una propiedad mediante una variable:

$elemento = header;
#{$elemento} {
    background-color: red;
}

Mixins

Bloques de código que se pueden reusar
Pueden aceptar argumentos
Si los argumentos tienen valores por defecto, van al final
Debemos definir el mixin antes de usarlo

Puede generar código duplicado (no es el caso siguiente debido a los parámetros)

@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}
h1 {
  @include headline(12px);
}
article h1 {
  @include headline(12px, blue);
}

Extends

Similar a mixins pero no acepta parámetros

Genera menos código duplicado:

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}

Código CSS generado:

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

Placeholders

¿Y si la clase .icon anterior no la usamos en nuestro css?
¿Y si el único uso de la clase .icon es para ser extendida?

Utilizaremos placeholders, se codifican anteponiendo un %

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /* error specific styles... */
}

.info-icon {
  @extend %icon;
  /* info specific styles... */
}

Genera el siguiente código CSS:

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

Mixins vs extends vs placeholders

El caso anterior se podría hacer con un mixin sin parámetros:

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /* error specific styles... */
}

.info-icon {
  @include icon;
  /* info specific styles... */
}

Funcionalmente es lo mismo que usando un placeholder, pero el CSS tiene código repetido:

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* info specific styles... */
}

Funciones y estructuras de control

@function
@if
- @else
- @else if
@each
@for
@while

Operaciones matemáticas

Suma, resta, división, multiplicación, módulo
Funciones definidas:
- round($number)
- ceil($number) y floor($number)
- abs($number)
- min y max
- percentage

Funciones de color

Evitan usar programas de imágenes para obtener los códigos hexadecimales de los colores

.lighten {
  color: lighten($color, 20%)
}
.darken {
    color: darken($color, 20%)
}

Similar con saturate y desaturate buscando colores más o menos intensos
Otras funciones:
- mix para mezclar colores
- grayscale($color) para convertir a gris
- Hay muchas más...

Lenguajes de preprocesado: Sass