Guía de Sass para principiantes

¿Te has preguntado alguna vez qué significa SASS? O quizás ya sabes lo que es pero no te has tomado el tiempo de estudiarlo y utilizarlo.

Si estás aprendiendo sobre él por primera vez, o quieres repasar tus conocimientos sobre el tema, este es el artículo para ti.

En este artículo, aprenderás los fundamentos de Sass, lo que es, y cómo utilizar las impresionantes características de Sass para acelerar el proceso de escritura de estilos.

Requisitos previos

Este artículo asume que tienes:

• Comprensión básica de HTML & CSS
• Un editor de código (VS Code recomendado). Si no lo tienes instalado, descárgalo aquí.
• Y un navegador (se recomienda Chrome o Firefox)

¿Qué es exactamente Sass?

Sass (Syntactically Awesome Style Sheets) es un preprocesador de CSS que da superpoderes a tu CSS.

Afrontémoslo: escribir CSS puede ser difícil a veces, especialmente en el mundo actual de interfaces de usuario cada vez más complejas.

Y muchas veces, te encontrarás con que te repites a menudo.

Sass viene al rescate en esta situación. Te ayuda a ceñirte a la filosofía DRY (Do Not Repeat Yourself) cuando escribes CSS.

Sass proporciona un compilador que nos permite escribir hojas de estilo en dos sintaxis diferentes, indentada y SCSS. Veamos ahora cada una.

Sintaxis indentada

Esta es la sintaxis más antigua que está indentada, y se deshace de las llaves y los puntos y comas. Tiene una extensión de archivo de .sass.

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

SintaxisSCSS

Esta es la sintaxis más nueva y popular. Es esencialmente un subconjunto de la sintaxis CSS3. Esto significa que usted puede escribir CSS regular con algunas funcionalidades adicionales.

Debido a sus características avanzadas a menudo se denomina como Sassy CSS. Tiene una extensión de archivo de .scss.

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; text-decoration: none; }}

Aclaración rápida: Este artículo utiliza la sintaxis SCSS porque es más utilizada.

¿Cómo funciona Sass?

Sass funciona de tal manera que cuando escribes tus estilos en un archivo .scss, se compila en un archivo CSS regular. El código CSS se carga entonces en el navegador.

Por eso se llama Preprocesador.

¿Por qué deberías usar Sass?

• Fácil de aprender: Si ya estás familiarizado con CSS, entonces te alegrará saber que Sass en realidad tiene una sintaxis similar, y así puedes empezar a usarlo, incluso después de este tutorial 😉
• Compatibilidad: Es compatible con todas las versiones de CSS. Por lo tanto, puede utilizar cualquier biblioteca CSS disponible.
• Ahorra tiempo: Ayuda a reducir la repetición de CSS, debido a sus potentes características.
• Código reutilizable: Sass permite variables y trozos de código (mixins) que pueden ser reutilizados una y otra vez. Esto te ayuda a ahorrar tiempo y te permite codificar más rápido.
• Código organizado: Sass ayuda a mantener su código organizado mediante el uso de parciales.
• Compatibilidad entre navegadores: Sass se compila en CSS y añade todos los prefijos de proveedor necesarios para que no tengas que preocuparte de escribirlos manualmente.

Características de Sass

Aquí tienes algunas de las características que hacen de Sass un verdadero CSS con superpoderes:

Variables en Sass

Puedes declarar variables en Sass. Este es uno de los puntos fuertes de Sass, ya que podemos definir variables para varias propiedades y utilizarlas en cualquier archivo.

La ventaja aquí es que si ese valor cambia, simplemente hay que actualizar una sola línea de código.

Esto se hace nombrando una variable con un símbolo de dólar $y luego referenciándola en otra parte de tu código.

$primary-color: #24a0ed;.text { color: $primary-color;}button { color: $primary-color; border: 2px solid $primary-color;}

Anidamiento en Sass

La mayoría de las veces, al escribir CSS, las clases suelen estar duplicadas. Podemos evitar esta duplicación anidando estilos dentro del elemento padre.

En CSS,

nav { height: 10vh; width: 100%; display: flex;}nav ul { list-style: none; display: flex;}nav li { margin-right: 2.5rem;}nav li a { text-decoration: none; color: #707070;}nav li a:hover { color: #069c54;}

Con Sass, el código anterior puede escribirse así:

nav { height: 10vh; width: 100%; display: flex; ul { list-style: none; display: flex; } li { margin-right: 2.5rem; a { text-decoration: none; color: #707070; &:hover { color: #069c54; } } }}

Selector Padre

En el código Sass de arriba, podrías notar el símbolo del ampersand & usado con la pseudo-clase hover. Esto se llama selector padre.

El selector padre, &, es un selector especial inventado por Sass que se utiliza en los selectores anidados para referirse al selector exterior. Fuente – Documentación de Sass

Así que, en el caso del código anterior, & se referirá al padre que es la etiqueta de anclaje a.

Puedes consultar mi artículo sobre cómo implementar Sass utilizando la metodología BEM.

Partials en Sass

Esta es una de las muchas características impresionantes de Sass que le da una ventaja.

Como hojas de estilo crecen grandes con el tiempo, se hace difícil mantenerlos. Debido a esto, tiene sentido dividir sus hojas de estilo en trozos más pequeños. En otras palabras, los parciales te ayudan a organizar y estructurar tu código.

Para declarar un parcial, empezaremos el nombre del archivo con un guión bajo _, y lo añadiremos en otro archivo Sass usando la directiva @import.

Por ejemplo, si tenemos un _globals.scss, un _variables.scss, y un _buttons.scss, podríamos importarlos en el archivo SCSS principal main.scss.

@import "globals";@import "variables";@import "buttons";

Notarás que el guión bajo y el .scss no se añaden. Esto se debe a que Sass asume automáticamente que se está refiriendo al archivo .sass o .scss.

Mixins en Sass

Otro problema importante con CSS es que a menudo usarás un grupo similar de estilos. Los mixins le permiten encapsular un grupo de estilos, y aplicar esos estilos en cualquier parte de su código utilizando la palabra clave @include.

Un ejemplo de cuándo utilizaría mixins es al usar Flexbox.

@mixin flex-container { display: flex; justify-content: space-around; align-items: center; flex-direction: column; background: #ccc;}.card { @include flex-container;}.aside { @include flex-container;}

Funciones y operadores de Sass

Sass proporciona un conjunto de herramientas para ayudar a escribir un código más programático.

Sass ofrece funciones incorporadas que nos permiten hacer cálculos y operaciones que devuelven un valor específico.

Abarcan desde cálculos de color hasta operaciones matemáticas como la obtención de números aleatorios y el cálculo de tamaños, e incluso condicionales.

También proporciona soporte para operadores matemáticos como +, -, \, *, / y %, que podemos utilizar con la función calc.

Aquí hay un ejemplo usando una función de conversión de píxeles a rem:

@function pxToRem($pxValue) { $remValue: ($pxValue / 16) + rem; @return $remValue;}div { width: pxToRem(480);}

Sin embargo, es importante tener en cuenta que el operador / para la división está obsoleto, y será eliminado en Dart Sass 2.0.0. Puedes leerlo en los Docs.

Así es como debe escribirse:

@use "sass:math";@function pxToRem($pxValue) { @return math.div($pxValue, 16px) * 1rem;}div { width: pxToRem(480px); // gives 30rem}

Aquí tienes un ejemplo de lógica condicional en un mixin:

@mixin body-theme($theme) { @if $theme == "light" { background-color: $light-bg; } @else { background-color: $dark-bg; }}

Sass también proporciona las funciones lighten y darken para ajustar un color en un determinado porcentaje.

Por ejemplo:

$red: #ff0000;a:visited { color: darken($red, 25%);}

Cómo configurar Sass para el desarrollo local

¡Genial! Ahora que hemos conocido los aspectos «teóricos» de Sass, vamos a meternos en el código para entender mejor su funcionamiento.

En esta sección, aprenderás a configurar un entorno de desarrollo local, y también pasarás por una sencilla landing page que he preparado.

Consulta la demo en Codesandbox y el repositorio de código en GitHub.

Modo de compilar Sass

Hay diferentes formas de compilar archivos Sass que son:

• Extensión de código VS
• Instalar usando NPM globalmente
• Instalar usando aplicaciones de código abierto como Compass.app, Live Reload, y Koala.
• Instalar usando Homebrew (para MacOS)

En este tutorial, usaremos la opción VS code Extension porque es la más fácil de empezar.

Cómo configurar Sass para VS Code

Paso 1: Instalar Live Sass Compiler

Primero, inicia Visual Studio Code. Una vez cargado, vamos al panel lateral de la izquierda y seleccionamos la pestaña de extensiones.

En la barra de búsqueda, buscamos «Live Sass Compiler» y lo instalamos. Esta extensión nos ayuda a compilar los archivos Sass – .scss (o .sass) – en archivos .css.

Paso 2: Configurar la ubicación de guardado

Ahora cambie la ruta del archivo para que Sass se compile en la carpeta styles.

Para ello, realizará cambios en el archivo settings.json.

En VS Code, vaya a Archivo >Preferencias >Configuración. Ahora busca live sass compile para cambiar la configuración global.

Haz clic en Edit settings.json.

Ahora, en las primeras líneas, donde ves este código:

{ "liveSassCompile.settings.formats": ,

Cambia "savePath": "/" por "savePath": "/styles", para que ahora se vea así:

{ "liveSassCompile.settings.formats":,

Paso 3: Compilar Sass

Ahora, después de guardar la configuración, vuelve al archivo Sass, y haz clic en el botón que dice «Watch Sass» en la parte inferior de la ventana.

Después de hacer clic en el botón, se crean dos archivos: .css y un .css.map en la carpeta styles.

No debes, sin embargo, cambiar ninguno de ellos. Porque ya te ayuda a compilar el Sass en CSS cada vez que guardes nuevos estilos.

Paso 4: Enlaza el archivo CSS

A continuación, enlaza el archivo CSS en tu index.html. En nuestro caso:

 <link rel="stylesheet" href="/styles/main.css" />

Ahora ejecuta el archivo en tu navegador. Este debería ser el diseño resultante en CodeSandbox a continuación:

Caminando a través del código

Aquí hay una explicación del código de la sección anterior:

• Tenemos un marcado básico en el archivo index.htmlque contiene una cabecera y la sección home/héroe.

  • Contiene un enlace al archivo CSS que la extensión ha compilado para nosotros.
  • Y algo de JavaScript para el toggle del menú responsivo.

• El main.scss se compila, y el archivo CSS resultante main.css es lo que se importa en el index.html:

  <link rel="stylesheet" href="/styles/main.css" />

• El archivo Scss principal main.scssimporta todos los parciales: _base.scss, _components.scss, _home.scss, _layout.scss _responsive.scss, _variables.scss.

  @import "variables";@import "base";@import "layout";@import "components";@import "home";@import "responsive";

• El parcial base contiene los mixins de flex y grid que se incluyen en los lugares donde los necesitamos.

Conclusión

¡Felicidades! Si has llegado hasta el final, significa que has aprendido cómo funciona Sass, sus geniales características, y espero que empieces a usarlo pronto.

Si quieres aprender más sobre Sass, te recomiendo que eches un vistazo al curso de freeCodeCamp.