¿Qué es Sass?

Módulos Sass

Un buen ejemplo de ello es la regla @use. Con ella, se puede importar un archivo CSS externo y que forme parte del archivo CSS final. De esta forma, podemos dividir el código en múltiples partes para que sea mucho más sencillo para nosotros trabajar con CSS.

Observa el siguiente archivo index.scss que contiene varias reglas @use para importar pequeños ficheros .scss con el contenido de secciones específicas de nuestro sitio:

@use "./fonts.scss";
@use "./header.scss";
@use "./main.scss";
@use "./footer.scss";

La herramienta Sass leerá cada archivo por separado y construirá un archivo .css final con el contenido de cada uno de esos ficheros .scss. Al final, el navegador leerá un único archivo index.css con todo el contenido (una descarga).

Importación CSS

Esto, con CSS nativo es muy complicado de hacer. Aunque utilicemos la regla @import, la diferencia es que el navegador no une ese código CSS en un sólo archivo final como hace con Sass, sino que realiza las peticiones de las múltiples partes desde el navegador en cada petición:

@import "./fonts.css";
@import "./header.css";
@import "./main.css";
@import "./footer.css";

En este caso, el navegador realizaría 4 descargar de ficheros .css individuales, procesándolo uno detrás del otro. Esto, en algunos casos, podría ofrecer una desventaja desde el punto de vista del performance.

Mixins

Los mixins permiten crear pequeñas agrupaciones de código CSS que podemos reutilizar en nuestros proyectos. Por ejemplo, observa el siguiente fragmento de código donde creamos un mixin rounded-box para establecer un estilo generalizado para nuestros elementos:

@mixin rounded-box($radius: 50px) {
  border-radius: $radius;
  border: 2px solid black;
  padding: 1rem 2rem;
  margin: 1rem;
}

.container {
  @include rounded-box(25px);   // border-radius: 25px;
}

.element {
  @include rounded-box;         // border-radius: 50px;
}

En el día a día se ha terminado por adoptar composición por medio de las clases de utilidad, más conocido hoy en día gracias a Tailwind CSS.

Funciones

Por otro lado, observa como se realizan funciones en Sass. En este caso hemos creado una función que se encarga de generar los estilos de los botones, recorriendo un array y añadiendo un color más oscuro si es necesario:

• 1️⃣ Creamos la función usando la regla @function / @return.
• 2️⃣ Definimos una variable $colors con un array de colores.
• 3️⃣ Con @each recorremos el array de colores.
• 4️⃣ Generamos una clase .button-red, .button-blue, etc...
• 5️⃣ Con @if / @else podemos realizar condiciones.

@function darken-color($color, $percentage) {
  @return darken($color, $percentage);
}

$colors: red, blue, green, orange;

@each $color in $colors {
  .button-#{$color} {
    background-color: $color;
    border: 0;
    padding: 0.5rem 1rem;

    @if $color == red {
      color: white;
    } @else {
      color: black;
    }

    box-shadow: 0px 4px 6px darken-color($color, 10%);
  }
}

<button class="button-red">It's me, Manz!</button>
<button class="button-blue">It's me, Manz!</button>
<button class="button-green">It's me, Manz!</button>
<button class="button-orange">It's me, Manz!</button>