Entonces, familiaricémonos con SASS

SASS (Syntactically Awesome StyleSheets  -  Hojas de estilo sintácticamente impresionantes) es un lenguaje de secuencias de comandos de preprocesador cuyo código se compila en CSS para que lo entiendan los navegadores. SASS tiene dos opciones de sintaxis:

  • original - SASS - uso de sangría para definir bloques de código;
  • uno más nuevo, SCSS (Sassy CSS), que implementa estructuras de código con llaves (hablaremos de ello en este artículo).

Ahora veamos cómo funciona SASS

Como se mencionó anteriormente, SASS debe compilarse para que el navegador lo entienda. Esto se puede hacer fácilmente instalando y ejecutando sass a través del administrador de paquetes. Tomará los cambios que especifique y convertirá el archivo sass/scss en un archivo css que se vincula a su HTML.

¿Por qué tales dificultades en el desarrollo del proyecto?

La arquitectura de un proyecto es siempre un compromiso entre performance y abstracción, espacio y memoria. Lo mismo ocurre con SASS. Sí, agrega un paso adicional en el proceso de desarrollo del proyecto, pero se beneficia de la escalabilidad y la capacidad de mantenimiento.

SASS es una excelente manera de escribir código más limpio y escalable. Este proceso se ve facilitado por las reglas que introduce el metalenguaje además de las reglas CSS existentes.

Con la capacidad de tener estructuras anidadas, variables, funciones, importaciones o incluso declaraciones, SASS abre un capítulo completamente nuevo en el diseño de interfaz, en pleno cumplimiento de los principios de código limpio.

Aunque cada función SASS puede representar varios principios de código limpio, bastará con demostrar una función para cada principio.

1. KISS (Keep It Simple Stupid) - No seas estúpido: mantenlo simple

Este principio requiere que el desarrollador cree una base de código que consta de fragmentos de código cortos y simples. No debe haber ningún elemento complejo, difícil de entender.

SCSS garantiza que cumplimos con el principio KISS aplicando las directivas @mixin@include. Le permiten escribir un fragmento de código una vez y reutilizarlo, como funciones, en cualquier parte del proyecto. La inclusión de mixins breves e intuitivos mejora la legibilidad y la comprensión del proyecto.

Piense en cómo puede alinear elementos dentro de diferentes contenedores usando flexbox. Puede aplicar las reglas flexa todos los contenedores y luego personalizar cada uno con diferentes estilos. Pero, ¿no sería su código aún más limpio si usa un elemento especial @mixinpara alinear los elementos donde sea necesario?

Además @mixins, es posible que haya notado las directivas @if @else. Estas también son características de SASS que permiten aplicar condiciones. En nuestro ejemplo, simplifican el código moviendo el estilo del componente a @mixin, pero sin sobrecargarlo con muchos parámetros.

2. DRY (No te repitas)

Como sugiere el nombre, DRY significa "Cada pieza de conocimiento debe tener una representación autorizada, única e inequívoca en el sistema". Si bien el código anterior es un excelente ejemplo del principio DRY, echemos un vistazo a otro superpoder de SASS, el anidamiento , que ayuda a implementar este principio:

Debido a que los botones tienen muchos estados y, a veces, necesitamos diseñar la mayoría de ellos, habrá muchas repeticiones automáticamente. El anidamiento puede reducir este tipo de código desordenado al reunir todo en un solo bloque.

El ampersand( &) también es una característica de SASS que le permite enlazar con el elemento más cercano, en nuestro caso, el Button.

3. Un archivo, un destino

Un archivo CSS que es demasiado grande y contiene varias reglas de espagueti siempre será difícil de leer y comprender. Dado que tendemos a tener clases, objetos, funciones, etc. unidireccionales, ¿por qué no creamos un archivo SCSS altamente especializado?

Pensemos en diseñar un formulario con reglas complejas y entradas, botones y un título muy específicos. Dicho archivo puede tener hasta 150 líneas de código o incluso más. SASS nos permite tener un archivo de forma principal en el que podemos importar otros archivos individuales.

Además, SASS ofrece una directiva @use, realmente útil si solo necesita importar una regla específica de otro archivo scss.

Tener un componente modular de este tipo permitirá que el proyecto siga siendo fácil de mantener, escalable y más fácil de arreglar si es necesario.

Consejo de bonificación

Todos nos esforzamos por desarrollar un código limpio, pero también nos importa un gran rendimiento, ¿verdad? Debido a que SASS finalmente se compila a CSS, siempre piense en cómo se verá el archivo CSS después de la conversión.

Una regla popular es que no debemos usar identificadores anidados o más de tres niveles de anidamiento. Esto dará como resultado un archivo CSS masivo que ralentizará el rendimiento de la carga, lo que puede ser especialmente notable en los navegadores más antiguos.

Compartir:

0 comentarios

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.