💅🏼 De CSS a SASS

🚠 ¿Qué es SASS?

Es un lenguaje de hoja de estilos que se compila a CSS. Permite el uso de variables, mixin y funciones, entre otros. La clave de SASS es que permite hojas de estilo más organizadas y fácilmente reutilizables tanto en un proyecto como entre varios.

🧪 Configurando SASS en un entorno de prueba

La configuración de SASS no prodría ser más simple. Para un entorno de testeo, sólo tendremos que instalar el paquete de node SASS

npm install -g sass

crear un archivo con la extensión .scss (para utilizar la nueva sintaxis) y poner el compilador de SASS en modo 'vigilante' para que compile el archivo .scss siempre que se detecten cambios en el fichero.

SASS tiene dos sintaxis. La que utiliza la extensión .scss es un superset de CSS, por lo que todo lo escrito en css normal es válido. Es la más popular por su cercanía a css. La otra sintaxis es la de los ficheros .sass, conocida como la sintaxis identada. Es prácticamente idéntica a scss execpto porque se emplea identación para definir la estructura de la hoja, al contrario de scss que utiliza llaves y puntos y comas.

Lo siguiente será comprobar esto: introduciendo código sass básico y viendo su equivalencia en css

//test.scss
$font-stack: Roboto, sans-serif;
$font-size: 24rem;
$primary-color: #333;

body {
    font: $font-size $font-stack;
    color: $primary-color;
}

/* test.css */
body {
  font: 24rem Roboto, sans-serif;
  color: #333;
}

Se puede apreciar como efectivamente, las variables son compiladas y sustituidas en el css. Esto puede ser muy útil para utilizar colores predefinidos y ser constantes en el diseño de una página entera.

🥝 Nesting

El anidado de sass nos permite imitar la estructura visual de un fichero html, haciendo el código más intuitivo y fácil de interpretar.

//test.scss

body {
    margin: 0;
    .container {
        padding: 20%;
    }
    .footer {
        height: 20%;
    }
}

El equivalente a este fragmento de código en css es fácil de intuir: cada elemento hijo de la clase deberá ser combinado con su padre en cada selector en css

/* test.css */

body {
  margin: 0;
}
body .container {
  padding: 20%;
}
body .footer {
  height: 20%;
}

🪓 Parciales y módulos

Existe la opción de crear ficheros que contengan fragmentos de código scss que será importado por otros ficheros durante la compilación. Para utilizar esta función sólo tenemos que crear un fichero y nombrarlo con una _ al principio. De esta manera el compilador lo detectará como un parcial y permitirá su importación como módulo. El uso de los módulos es sencillo: se utilizan como si fueran objetos con propiedades, donde las propiedades son las variables. Las definiciones de clases se concatenan a las definiciones del fichero importador.

// _partial.css

$font-stack: Roboto, sans-serif;
$font-size: 24rem;
$primary-color: #333;

body {
    font: $font-size $font-stack;
    color: $primary-color;
}

// test.css

@use 'partial';

.clase {
    background-color: partial.$primary-color;
    color: white;
}

/* test.css */

body {
  font: 24rem Roboto, sans-serif;
  color: #333;
}

.clase {
  background-color: #333;
  color: white;
}

🧰 Mixins

Los mixins facilitan la escritura de algunas declaraciones que en css son muy tediosas de escribir. Permiten declaraciones de css reusables con la opción de pasar valores para mayor flexibilidad

// test.scss

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}

.clase {
    @include transform(rotate(30deg));
    color: white;
}

/* test.css */

.clase {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  color: white;
}

🧬 Extensión/Herencia

Esta es una de las utilidades más potentes de sass, ya que permite compartir un conjunto de propiedades CSS entre varios selectores. Esto resulta en código mucho más limpio y dota al css de la capacidad de ser refactorizado.

// test.scss

%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message {
    @extend %message-shared;
}

.success {
    @extend %message-shared;
    border-color: green;
}

.error {
    @extend %message-shared;
    border-color: red;
}

.warning {
    @extend %message-shared;
    border-color: yellow;
}

/* test.css */

.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

📐 Operadores

Realizar operaciones matemáticas en sass es extremadamente sencillo

//test.scss

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

/* test.css */

.container {
  width: 100%;
}

article[role=main] {
  float: left;
  width: 62.5%;
}