Aprende SASS: tutorial definitivo con ejemplos de código

Si ya has creado sitios web, probablemente estés familiarizado con CSS y puede que incluso hayas echado de menos algunas características. Como diseñar sitios web con CSS puede llegar a ser laborioso, muchos desarrolladores han empezado a utilizar SASS. Con el prometedor nombre de “hojas de estilo sintácticamente increíbles” (Syntactically Awesome Stylesheets), el acrónimo SASS aglutina a un preprocesador y a un lenguaje de hojas de estilo. 

SASS es un preprocesador porque requiere una conversión: antes de que pueda ejecutarse, el código SASS se ha de compilar en el más conocido CSS. ¿Cómo se lleva a cabo esta conversión? Sigue a continuación nuestro detallado tutorial de SASS y aprende a diseñar con SASS.

SASS es multiplataforma y puede usarse, por tanto, tanto en PC Windows como en Mac o Linux. SASS se basa, al menos en la versión original, en Ruby, por lo que es necesario que este lenguaje de programación esté instalado en el sistema. En macOS Ruby debería estar preinstalado. Para equipos con sistema Windows puede utilizarse el instalador de Ruby. El paquete de instalación contiene el lenguaje, un entorno de desarrollo (que no se necesita para SASS) y la documentación. La instalación no entraña ninguna complejidad (ni siquiera para las distribuciones de Linux).

El proyecto LibSASS permite utilizar SASS con otros lenguajes de programación: C/C++, Java, JavaScript, Node PHP o Python, entre otros, ya están disponibles. Usando wrappers (una herramienta de implementación) pueden aprovecharse las ventajas de otros lenguajes de programación. Tanto la biblioteca LibSASS como la información sobre los wrappers disponibles puede encontrarse en el sitio web oficial de LibSASS del proyecto.

Hay varias maneras de integrar a SASS en tu sistema. Hoy ya se han consolidado varias aplicaciones que facilitan el trabajo con el lenguaje de hojas de estilo. Algunas son de pago, pero otras, como Koala o Scout-App, están disponibles de forma gratuita y con código abierto. En principio, no se necesita ningún programa adicional para poder utilizar SASS en tu sistema, ya que Ruby incluye el gestor de paquetes gem, que permite instalar el lenguaje de hojas de estilo en la terminal. Abre entonces la consola y escribe este comando:

Si recibes un mensaje de error, es posible que no tengas los derechos necesarios para instalar el software. Esto puede corregirse con el comando sudo (macOS, Linux) o iniciando la terminal de líneas de comando como administrador haciendo clic en el botón derecho del ratón (Windows). Para verificar que la instalación se ha realizado correctamente y que está actualizada, solicita a SASS la versión instalada con este comando:

Pero además de instalarlo, también debes configurar la compilación, porque el código SASS solo funciona en una web si antes se ha convertido a CSS. Una vez más, hay varias maneras de hacerlo: si has elegido instalar SASS con un programa, también puedes compilarlo con él. Si trabajas con los Task Runners Grunt o Gulp, ellos se encargarán de hacerlo una vez configurados. Hay plugins para la compilación incluso para algunos editores de texto. Pero también puede hacerse en la consola de comandos.

Con SASS los usuarios pueden elegir compilar después de cada modificación en el código fuente o habilitar un modo de monitorización. En este último caso, el compilador revisa un archivo o una carpeta completa y realiza la conversión automáticamente. Para iniciar una monitorización, navega hasta la carpeta de tu proyecto web en la terminal de comandos e inicia uno de estos dos comandos:

Con este código monitorearás el archivo ejemplo.sass y compilarás el código fuente en el archivo ejemplo.css. Si añades dos subcarpetas más a la carpeta de tu proyecto (una para los archivos SASS y otra para los archivos CSS) y los nombras respectivamente sass y css, puedes supervisar toda la carpeta:

Tan pronto como hagas un cambio en los archivos SASS y lo guardes, el compilador sobrescribirá automáticamente los archivos CSS con las versiones más recientes.

En el caso de querer pasar un proyecto escrito en CSS a SASS, también tienes que convertir tu antiguo código CSS. Para ello debes considerar primero si deseas trabajar en la sintaxis original de SASS o en la nueva variante SCSS (en este tutorial de SASS siempre introduciremos ambas formas). También hay comandos para las conversiones:

El convertidor lee el formato a partir de las extensiones de archivo. Si lo prefieres, hay páginas, como la del convertidor CSS 2 SASS/SCSS, que se ocupan de la conversión de una forma muy sencilla: introduces el código CSS en el lado izquierdo de la ventana y en el lado derecho obtienes el código fuente convertido al formato deseado. Este código puede copiarse donde sea menester. Si decides usar SCSS, la conversión es opcional: renombra tus archivos -en lugar de .css, escribe .scss. Cualquier código escrito con reglas CSS también funciona con SCSS.

Como ya se ha mencionado, no hay solo una sintaxis en SASS. Hoy hay dos formatos consolidados que compiten entre sí. Originalmente, SASS se basaba en la sintaxis que hoy se conoce como “indented syntax”, en la que las indentaciones (o sangrías de texto) generan el anidamiento y cada salto de línea finaliza una línea de código. SCSS, en cambio, se orienta más al formato que conocemos por CSS y requiere, por lo tanto, corchetes y puntos y comas. A continuación, nos adentraremos en las peculiaridades de SASS.

La mayoría de los desarrolladores web aprecian el uso de variables en SASS porque con ellas puede guardarse información con un alias y reutilizarla más tarde. Su uso es muy popular, por ejemplo, en el contexto de los colores y las especificaciones de tamaño. En una variable se puede guardar el valor hexadecimal de un color o ajustar un tamaño fijo utilizando funciones matemáticas. Las variables se introducen en SASS con el símbolo del dólar ($):

SCSS

Estas variables se colocan entonces en los lugares apropiados del código:

SASS

SCSS

Al compilar, el compilador ajusta la sintaxis a CSS de nuevo y resuelve las variables:

CSS

Para ciertas variables, puede ser útil especificar un valor por defecto. A menos que se defina lo contrario, SASS recurre a esta información (si la variable se define de forma diferente, se ignora la información predefinida). Esto puede ser útil, por ejemplo, si un desarrollador presenta un producto inacabado a un cliente que aún desea realizar cambios o cuando un diseñador web utiliza su propia plantilla. Este valor predeterminado se puede lograr colocando una etiqueta !default. Se pueden introducir tanto valores normales como variables ya definidas:

SASS

SCSS

SASS tiene una directiva muy útil que permite incorporar otros archivos en la hoja de estilos, como podría hacerse creando e importando un archivo en el que se definan todas las variables (por ejemplo, todos los valores de color que se necesitan). La información del archivo importado se utiliza como si formara parte del código fuente. Esto mantiene la claridad en las hojas de estilo. Con @import puede importarse cualquier número de archivos, incluso desde subdirectorios. La función también puede importar varios archivos en un solo paso:

SASS

SCSS

Si deseas incluir ficheros .sass o .scss, no necesitas especificar la extensión de fichero, porque el sistema asume automáticamente que se trata de estos tipos de fichero. Sin embargo, también es posible integrar archivos CSS y, para que el ordenador sepa exactamente lo que significa, en este caso sí hay que especificar la terminación. Al compilar, se invierte esta simplificación y el código CSS final ya no contiene la directiva, sino solo la información de los archivos.

En el trabajo con SASS, lo que se importa más a menudo son los llamados partials. Se trata de fragmentos de código con los que se crean módulos que se pueden instalar fácilmente una y otra vez. Al nombrar el archivo, es importante preceder el nombre real con un guion bajo, el cual informa al compilador de que este archivo no necesita una contrapartida en CSS. De lo contrario, el sistema convertiría todos los archivos SASS a CSS.

Al importar los parciales el guion bajo se omite. SASS también interpreta a qué archivo se refiere. Por lo tanto, es conveniente no crear archivos con el mismo nombre (con y sin guión): dos archivos llamados ejemplo.sass y _ejemplo.sass respectivamente llevarán a error. Esto también se aplica a las extensiones de archivo: ejemplo.sass y ejemplo.scss no deberían estar en el mismo directorio.

Otra directiva importante la constituyen las llamadas mixins, reglas fijas que pueden invocarse en la hoja de estilo cuando sea necesario sin tener que volver a insertar el código completo. Esto ayuda a trabajar más rápido y a mantener el código más ligero. Una mixin puede contener todo lo que está permitido en SASS: reglas, parámetros o funciones, pero, incluso aunque tiene un espacio ilimitado, no conviene alojar en ella más de veinte líneas. Después de todo, el objetivo es incrementar la simplicidad, no complicarlo todo más.

Para trabajar eficazmente con mixins, solo se necesitan dos directivas: @mixin e @include: con la primera se crea el modelo, con la segunda se inserta el bloque de código:

SASS

SCSS

Al crear la mezcla, se da un nombre a la plantilla (por ejemplo, hidden) que permite volver a integrar el bloque de código en la posición correspondiente.

SASS

SCSS

En el código CSS final aparece el bloque completo de código fuente en lugar del mixin. Aquí, la definición de la mezcla en sí (@mixin) ya no aparece.

La regla extender permite ahorrar mucho trabajo. La directiva garantiza que todas las propiedades de una clase se transfieran a las de otra. Usando @extend se evita tener que redefinirlo todo. La directiva también funciona como una cadena. Una clase definida por @extend puede a su vez formar parte de una tercera clase:

SASS

SCSS

El compilador resuelve el código de la siguiente manera:

CSS

En algunas situaciones puede ser necesario especificar la apariencia de una clase que no se quiere aplicar en una página web, pero sí utilizar en forma de @extend. Esto ocurre sobre todo cuando se crea una biblioteca. SASS ofrece selectores de marcadores de posición (placeholder selectors) para tales situaciones. Se utiliza un signo de porcentaje (%) para identificar a una clase que se crea únicamente con el fin de utilizarla en otras clases. Si al diseñar el sitio web no se importa un selector de este tipo, SASS tampoco lo compilará en CSS:

SASS

SCSS

En el código CSS final, la clase module ya no aparece. Sus propiedades se transfieren directamente a la clase post.

CSS

La etiqueta !optional también puede ser muy útil en @extend: si escribes una extensión de una clase que no existe, SASS generará un error durante la compilación. Con !optional se evita, porque SASS ignorará entonces el comando si no encuentra una clase adecuada.

En HTML se asume que el código se anida en una estructura jerárquica. CSS, en cambio, ignora esta función y obliga al usuario a declarar las propiedades una y otra vez. SASS devuelve la anidación a las hojas de estilo al permitir que las subcategorías hereden las propiedades de la categoría superior. Esto también garantiza la ligereza del código y la reducción de la carga de trabajo para escribir y esperar. Por ejemplo, es posible definir la apariencia de los enlaces y especificar en una anidación cómo cambian de color cuando se pasa con el ratón por encima (hover) o cuando ya se han visitado.

Si se emplea el nesting en el código, se usa el símbolo & para reemplazar a una parte del selector por el superior.

SASS

SCSS

En la compilación, el anidamiento debe disolverse de nuevo. En CSS cada estado aparece definido por separado.

CSS

Además de la resolución del anidamiento, la compilación también asegura que las variables (cuya definición omitimos en el ejemplo) se conviertan de nuevo en valores hexadecimales.

El nesting también permite transferir las “propiedades”. CSS conoce algunas propiedades que pertenecen a la misma familia. Por ejemplo, toda la información de formato de fuente pertenece a la misma familia (font), pero en CSS debe definirse como puntos individuales con sus nombres de propiedad completos. SASS permite anidar las propiedades bajo los nombres de las familias.

SASS

SCSS

SASS conoce numerosas funciones que facilitan el trabajo en la hoja de estilo. Se trata de workflows predefinidos que evitan tener que ejecutarlos manualmente. Las funciones pueden asignarse a diferentes categorías:

• Colores: con estas funciones pueden ajustarse los valores de color, la saturación, la transparencia y muchas otras propiedades. Con mix(), p.ej., pueden mezclarse dos colores y crear uno nuevo.
• Listas: en las listas (series de valores de propiedad CSS) las funciones sirven para leer el número de entradas o fusionar varias listas en una sola.
• Cadenas: las strings son cadenas fijas de caracteres, como las que se utilizan en los textos. Las funciones de esta categoría pueden colocar una cadena de caracteres entre comillas o convertir un texto completo a mayúsculas.
• Selectores: con las funciones de esta categoría se manipulan selectores completos. Con selector -unify() puedes fusionar dos selectores en uno solo (ahorrando mucha escritura).
• Números: dentro del tema de los números, valores o unidades, encontrarás funciones que pueden, entre otras cosas, redondear hacia arriba y hacia abajo, buscar el número más grande de un conjunto o entregar un número aleatorio.
• Mapas: los mapas en SASS son estructuras de datos compuestas de claves y propiedades. Con las funciones adecuadas, estos conjuntos de datos pueden manipularse fusionando dos mapas o borrando una clave de un mapa.
• Introspección: estas funciones permiten revisar el contenido de la hoja de estilo completa para comprobar, entre otras cosas, si en el código se encuentra una característica determinada, un mixin o una función en concreto.
• Miscellaneous: en el punto miscelánea SASS también incluye la útil función if() –que no debe confundirse con la directiva del mismo nombre. La diferencia se explica más abajo en el punto “Ramificación”.

Las funciones se insertan en el código siguiendo siempre el mismo patrón: cada función posee un nombre propio y ciertos parámetros que se encierran entre paréntesis separados por comas. Como resultado, la función entrega un valor individual. Explicaremos esta sintaxis de SASS usando el ejemplo de la simple pero útil función mix():

SASS

SCSS

En esta función se mezclan los dos valores de color que se han definido previamente en las variables $color-1 y $color-2 (no es necesario guardar antes los valores de color en las variables; si se prefiere, los valores hexadecimales pueden incluirse directamente en la función). Como tercer parámetro, se especifica la proporción de la mezcla: en nuestro ejemplo, el resultado final contendrá un 30 por ciento de $color-1. Si dejas este último parámetro vacío, SASS interpreta que la mezcla ha de resultar 50/50. En el código CSS aparecerá un valor único (el valor hexadecimal del color resultante):

CSS

Las funciones explicadas hasta ahora están incluidas por defecto en SASS, pero el lenguaje de hojas de estilo también permite definir funciones específicas para un proyecto, lo que agiliza las fases del trabajo que más se repiten. Con ello se asemejan a las mixins, con la diferencia de que, mientras estas entregan líneas de código como output, las funciones solo entregan un valor. Las funciones se crean con la directiva @function, aunque en realidad necesitan siempre dos directivas: además de la inicial @function, se necesita un @return anidado con el cual se define el valor de salida:

SASS

SCSS

En este ejemplo de arriba hemos calculado el ancho de columna para una cuadrícula de diseño. Primero definimos 12 columnas. En el siguiente paso, se da nombre a la función y se define cuántos parámetros contiene (en nuestro ejemplo, un número). Además, determinamos qué debe hacer la función y, por lo tanto, qué valor entrega. En este caso, column-width multiplica el número que se introduce como parámetro por 100 % y divide el resultado por el número de columnas. Una vez definida la función, se puede utilizar una y otra vez con parámetros distintos. En el código final solo aparece el valor resultante:

CSS

Los bucles proporcionan al lenguaje de hojas de estilo el atractivo de un lenguaje de programación real. En SASS se utilizan para crear bloques de instrucciones que se repiten hasta que tiene lugar una condición determinada. Existen tres directivas diferentes para crear bucles:

• @for
• @while
• @each

@for es el loop estándar en programación: comienza al inicio y repite la orden hasta que se alcanza un estado de salida y con ello el final. En SASS, esta directiva se presenta en dos variantes diferentes: o bien el último ciclo se ejecuta una vez más cuando se alcanza el objetivo o se abandona el bucle antes.

SASS

SCSS

Tras la directiva primero se especifica una variable cualquiera ($i) y luego se define el punto de inicio (1) y el de destino (4). Con through se indica que la cuarta repetición también debe realizarse, mientras que con to el bucle se detiene después de la tercera vuelta. Si para el inicio se define un valor superior al elegido para el final, SASS cuenta hacia atrás. Hay dos elementos integrados en el bucle: primero se elige la notación de CSS que obtendrá una cifra superior con #{$i}: la variable –y, por lo tanto, también la notación– se incrementará en 1 con cada vuelta.

Seguidamente se escribe, bien entre corchetes o con sangría, lo que debe suceder. En nuestro ejemplo, cada vuelta hace aumentar la información de tamaño. En CSS aparecerá un valor para cada pasada:

CSS

La directiva @while tiene una mecánica muy similar a la de @for pero, mientras que este último tiene puntos fijos de inicio y final, un bucle @while contiene una consulta de tipo lógico: mientras un estado siga siendo verdadero, las órdenes deberán repetirse. Como se verá a continuación, con la función @while podemos lograr exactamente el mismo resultado:

SASS

SCSS

Con este tipo de bucle, primero se debe asignar un valor a las variables, ya que la directiva en sí no necesita un valor de inicio. En el ciclo se ha de especificar el estado hasta el que se realizan las repeticiones. En nuestro ejemplo, el bucle se ejecuta siempre que la variable sea inferior a 5. La instrucción dentro del bucle es inicialmente la misma que en el ejemplo de @for. De nuevo, haremos que se ajuste la designación del elemento de las variables y aumente el tamaño. También se ha de integrar un comando en el bucle que haga que $i aumente con cada vuelta, porque, de lo contrario, el bucle se ejecutaría hasta que el compilador SASS se detuviera. Al final se obtiene el mismo código CSS que en @for.

La directiva @each funciona de manera diferente. Este bucle se basa en una lista de datos especificada por el usuario que el bucle recorrerá en cada vuelta. Para cada entrada, @each hace una repetición diferente. De este modo, indicando una lista con los valores 1, 2, 3 y 4 sería posible generar el mismo resultado que con los otros bucles. La verdadera ventaja de este bucle, sin embargo, es que también puede introducirse otra información en la lista exceptuando valores numéricos (con @each, por ejemplo, se insertan varias imágenes diferentes en el diseño). Puedes introducir los datos directamente en la directiva o introducir la lista en una variable y luego llamarla.

SASS

SCSS

Aquí, de nuevo, necesitas una variable. Esta asume el nombre de una de las entradas de la lista en cada vuelta. El nombre está integrado tanto en la denominación del bloque de código como en el nombre de archivo de la imagen. Para que el diseño funcione bien, las imágenes deben haber sido guardadas en la ruta especificada. El bucle se asegura de que la variable se haga cargo de la siguiente entrada.

CSS

Además de los bucles, SASS ofrece aún otra herramienta más conocida en el entorno de la programación: las ramificaciones según el principio “si-entonces-si no”. Con la directiva @if una orden solo se ejecuta si tiene lugar un cierto evento; en caso contrario, se ejecuta otro comando. Además de esta directiva, también hay una función if(). No guardan relación, pero pueden aparecer juntas. La función es fácil de explicar. Contiene tres parámetros: la condición y dos salidas diferentes. La primera salida se emite si el primer parámetro es verdadero, de lo contrario la función reproduce el tercer parámetro.

SASS

SCSS

En nuestro ejemplo, la función verifica si la variable $text-color está configurada en negro (black). Si este es el caso (como en el ejemplo), el fondo se mostrará blanco. En cualquier otro caso, el CSS mostraría el fondo en negro. Como puede verse en este ejemplo, esta técnica no es quizá la más adecuada para el diseño de un sitio web completo. Tanto la directiva como la función son útiles en primera línea en mixins o partials. Esto permite a la plantilla reaccionar mejor a los valores que aparecen en el diseño final. A la inversa, si ya sabes que el color del texto es negro, no hace falta escribir una ramificación compleja para que el fondo sea blanco.

Las funciones tienen la particularidad de devolver un solo valor. Para requisitos más complejos, conviene emplear la directiva @if, que cuenta con la ventaja de poder distinguir más de dos casos entre sí:

SASS

SCSS

La sintaxis de la directiva permite teóricamente crear un caso para cada valor previsto, aunque es necesario colocar la directiva @else (que, en combinación con if puede invocarse tantas veces como se desee) detrás de la @if inicial. Solo el último @else permanece libre, cubriendo así a todos los demás casos.

Con SASS también es útil añadir comentarios al código fuente. Los comentarios contribuyen a que el código sea comprensible para cualquiera que lo lea en otro momento. Esto ocurre así especialmente cuando se crean plantillas para otros usuarios, porque los comentarios pueden serles útiles en la edición. Muchos diseñadores web también usan comentarios para estructurar el código con más claridad. La mayoría de los lenguajes de programación y marcado tienen la capacidad de insertar en el código texto que en la compilación o el análisis se ignora. Este texto está dirigido a las personas y no a las máquinas.

Los programadores y diseñadores web también usan esta función para “comentar” el código correcto, lo que se hace colocando un bloque de código, que no se necesita, pero que no se desea eliminar del código fuente, entre las etiquetas de comentarios.

Cada lenguaje tiene un método específico para comentar texto. En SASS, esto se hace de dos maneras diferentes. Por un lado, como en CSS, en SASS puedes utilizar /* */. Con este método puedes comentar varias filas al mismo tiempo. A menudo se encuentran comentarios en CSS o SASS donde cada línea en el bloque de comentarios comienza con un asterisco. Sin embargo, esto es solo una convención y no una necesidad.

Además de este conocido método de CSS, con // también puedes comentar líneas aisladas:

La diferencia entre los dos métodos también radica en que, si con la configuración por defecto la primera variante se copia en el CSS compilado, la segunda se pierde. De una forma u otra, un documento CSS con comentarios no puede lanzarse online como una versión productiva. Para ello se utiliza una versión minimizada que los navegadores pueden cargar más rápido.