Abrazando Sass: por qué debería dejar de usar Vanilla CSS

Cuando escuché por primera vez sobre Sass y otros preprocesadores CSS, mis pensamientos exactos no eran muy entusiastas. “¿Por qué necesitamos otra herramienta para algo que ya funciona tan bien como CSS?”. “No usaré eso”. “Mi CSS está lo suficientemente ordenado como para no necesitarlo”. “Un preprocesador es para la gente que no sabe escribir CSS, si sabes escribir CSS no necesitarás un preprocesador”. “Después de todo, los procesadores son para personas que no saben escribir CSS. Si lo hicieran, no necesitarían un preprocesador”. Y en realidad los evité por un tiempo, hasta que me vi obligado a usarlo en varios proyectos.

No me di cuenta de lo mucho que disfrutaba trabajar con Sass hasta hace poco, cuando tuve que volver a cambiar a Vanilla CSS en un proyecto. Durante ese tiempo, aprendí tanto que decidí elogiar a Sass y hacer de este un mundo mejor, ¡y hacerte una persona más feliz!

¿Por qué usar Sass de todos modos?

Organización: @import

Este proyecto que acabo de mencionar, un gran sitio web de comercio electrónico, tenía un solo archivo CSS con 7184 líneas de declaraciones de estilo sin comprimir. Sí, has leído bien: siete mil ciento ochenta y cuatro líneas de CSS. Estoy seguro de que este no es el archivo CSS más grande que los desarrolladores front-end tuvieron que manejar en la industria, pero era lo suficientemente grande como para ser un completo desastre.

Esta es la primera razón por la que necesita Sass: le ayuda a organizar y modularizar sus hojas de estilo. No son variables, no es anidamiento. Para mí, la característica clave de Sass son los parciales y cómo extiende la regla CSS @import para permitirle importar archivos SCSS y Sass. En la práctica, esto significa que podrá dividir su enorme archivo style.css en varios archivos más pequeños que serán más fáciles de mantener, comprender y organizar.

La regla @import ha existido durante casi tanto tiempo como el propio CSS. Sin embargo, ganó mala fama ya que cuando usa @import en sus archivos CSS, activa solicitudes HTTP separadas, una para cada archivo CSS que está importando. Esto puede ser perjudicial para el rendimiento de su sitio. Entonces, ¿qué pasa si lo usas con Sass? Si nunca te detuviste a pensar qué significa la palabra “preprocesador”, ahora es el momento.

Un preprocesador es un programa que procesa sus datos de entrada para producir una salida que se utiliza como entrada para otro programa. —Wikipedia

Entonces, volviendo a nuestra regla @import, esto significa que @import será manejado por Sass y todos nuestros archivos CSS y SCSS se compilarán en un solo archivo que terminará en nuestro sitio en vivo. El usuario deberá realizar una sola solicitud y descargará un solo archivo, mientras que la estructura de su proyecto puede estar compuesta por cientos de archivos modularizados. Así es como puede verse el archivo style.scss de un proyecto Sass típico:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

No te repitas: variables

Cualquier artículo que elogie a Sass probablemente comenzará mencionando su característica estrella: las variables. El uso más común de las variables es una paleta de colores. ¿Cuántas veces encontraste varias declaraciones de lo que se supone que es el mismo color, terminando en el CSS como tonos ligeramente diferentes porque nadie usa el mismo código hexadecimal? Sass al rescate. En Sass, puede declarar variables con casi cualquier valor. Entonces, nuestra paleta de colores puede ser algo como:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Las palabras que comienzan con "$" son variables Sass. Lo que significa es que más adelante en sus hojas de estilo, podrá usar esas palabras y se asignarán a los valores que definió antes:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Imagine cómo esto podría cambiar nuestras 7184 líneas de código CSS, y puede comenzar a desear Sass ahora mismo. Aún mejor, imagina que hay un rediseño de la marca y necesitas actualizar todos los colores en tu CSS. Con Sass, lo único que debe hacer es actualizar las declaraciones de esas variables una vez y ¡baam! Los cambios estarán alrededor de sus hojas de estilo.

Codifiqué este ejemplo en Sassmeister, un parque infantil de Sass. Así que adelante e intente cambiar esas variables a otra cosa.

La utilidad de las variables no se limita solo a los colores, sino también a las declaraciones de fuentes, tamaños, consultas de medios y más. Este es un ejemplo muy básico para darte una idea, pero créeme, las posibilidades con Sass son infinitas.

Código fuente más limpio: anidamiento

El anidamiento podría ser posiblemente la segunda característica más mencionada de Sass. Cuando volví a Vanilla CSS después de usar Sass, el archivo CSS que estaba mirando parecía tan desordenado que no estaba seguro de si estaba minimizado. Sin anidamiento, Vanilla CSS no se ve mejor que los archivos .min.css bastante impresos:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Con Nesting, puede agregar clases entre las llaves de una declaración. Sass compilará y manejará los selectores de manera bastante intuitiva. Incluso puede usar el carácter "&" para obtener una referencia del selector principal. Volviendo a nuestro CSS de ejemplo, podemos transformarlo en:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Se ve hermoso y es más fácil de leer. Siéntete libre de jugar con este ejemplo.

¡Otra vez! No te repitas: Mixins y Extends

La repetición en CSS siempre es difícil de evitar. Y no está de más insistir un poco más en esto, especialmente cuando Sass te ofrece mezclas y extensiones. Ambas son características poderosas y ayudan a evitar muchas repeticiones. Las posibilidades con mixins y extends no parecen tener fin. Con mixins, puede hacer declaraciones CSS parametrizadas y reutilizarlas en sus hojas de estilo.

Por ejemplo, supongamos que tiene un módulo de caja con un botón dentro. Desea que el borde del cuadro y el fondo del botón sean del mismo color. Con Vanilla CSS, haces algo como:

 .box { border: 2px solid red; } .box .button { background: red; }

Digamos que ahora quiere el mismo módulo de caja, pero con un color diferente. Agregará algo como esto a su CSS:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Ahora, supongamos que desea un módulo de caja, pero con un borde más delgado. Agregarías:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Mucha repetición, ¿verdad? Con Sass puede abstraer estos casos para reducir la repetición. Podrías definir un mixin como este:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Y así, su código fuente se puede reducir a:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Se ve hermoso, ¿verdad? Juega con este ejemplo. Puede crear su propia biblioteca de mixins, o incluso mejor, puede usar una de las bibliotecas comunitarias que existen.

Las extensiones son similares, le permiten compartir propiedades de un selector a otro. Sin embargo, en lugar de generar múltiples declaraciones, generan una lista de clases sin repetir sus propiedades. De esta manera, también puede evitar la repetición de código en su salida. Olvidémonos de los botones en nuestro ejemplo anterior y veamos cómo @extend funcionaría con .boxes .

Digamos que declaras una primera caja:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Ahora quiere dos cuadros similares a este, pero con diferentes colores de borde. Puedes hacer algo como:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Así es como se vería el CSS compilado:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Potente, ¿verdad? Puedes encontrar el ejemplo aquí. Si revisa el CSS resultante, se dará cuenta de que la clase .box se incluye en la salida. Si no desea este comportamiento, puede combinar @extend con "marcadores de posición". Un marcador de posición es un selector especial que no generará una clase en el CSS. Por ejemplo, a veces me encuentro restableciendo mucho los estilos predeterminados de las listas. Generalmente uso @extend con un marcador de posición como este:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Luego puede reutilizar este patrón en todas sus hojas de estilo:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Su CSS compilado se verá así:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Mira los ejemplos aquí.

¿Hay más?

¡Absolutamente! No quería complicar demasiado este artículo, pero hay un mundo de Sassy esperando a que lo descubras; y también hay muchas características más allá de esas: operaciones, comentarios de una sola línea con //, funciones, bucles if... si alguna vez pensaste "sería genial hacer algo 'X' con CSS", estoy seguro eso de 'X' ya lo hizo Sass. "CSS con superpoderes" es su lema, y ​​eso no puede estar más cerca de la verdad.

Conclusión

¡Ve y visita la página de instalación y comienza a hackear! Créeme, no te arrepentirás.

Sí, hay algunas alternativas a Sass. Otros preprocesadores (LESS, Stylus), postprocesadores, Grunt, etc. Incluso hay Variables CSS. No digo que Sass sea la única tecnología que existe. Todo lo que digo es que es el mejor! Por ahora. ¿No crees en lo que estoy diciendo? Adelante, pruébalo tú mismo. ¡No te arrepentirás!