Ventajas de usar un preprocesador (Sass) en el desarrollo de CSS

Hay muchos argumentos en la web sobre si usar un preprocesador CSS es útil en el desarrollo o no. Mi opinión personal es que es posible que no necesite un preprocesador para pequeños proyectos o aplicaciones web.

Sin embargo, el mantenimiento y la legibilidad del código CSS se vuelve más difícil a medida que el proyecto se hace más grande. Tratar con miles de líneas de reglas CSS, desperdicia el tiempo de los desarrolladores y aumenta el costo del proyecto. A medida que el proyecto se hace más grande, CSS causa algunos problemas como:

  • Gran esfuerzo por pequeños cambios.
  • Dificultades para estructurar el código.
  • Redundancia de código
  • Líneas interminables de clases y reglas CSS

Un preprocesador nos ayuda a lidiar con estos problemas. Tiene algunas ventajas sobre el CSS normal. Antes de profundizar, primero explique qué es un preprocesador CSS ...

¿Qué es un preprocesador CSS?

Un programa / herramienta que tiene su propia sintaxis que luego se compila en un código CSS estándar.

Un preprocesador tiene su propia sintaxis para que los desarrolladores escriban código CSS más fácil y limpio. Más tarde, se traduce en un archivo separado al CSS estándar, porque los navegadores no entienden la sintaxis.

Hay diferentes preprocesadores como Sass, Less y Stylus. En este artículo, explicaré algunas ventajas de Sass.

¿Qué es sass?

Referencia: sitio web oficial de Sass

Sass es uno de los preprocesadores CSS más utilizados. Tiene varias características para ayudar a los desarrolladores a escribir un código CSS mejor y más limpio. Puede consultar más detalles en el sitio web oficial de Sass y en el repositorio de Github.

Preguntas frecuentes: Sass vs SCSS

Esta es una pregunta frecuente. En realidad, ambos son Sass con una sintaxis diferente. SCSS es básicamente una versión más nueva, Sass Versión 3.

Ejemplo de sintaxis Sass:

$ color: gris
= mi-fuente ($ color)
  Familia tipográfica: Arial, Helvetica, sans-serif
  tamaño de fuente: 16px
  color: $ color
cuerpo
  fondo: $ color
  margen: 0
  + my-font (blanco)

Ejemplo de sintaxis SCSS:

$ color: gris;
@mixin my-font ($ color) {
  Familia tipográfica: Arial, Helvetica, sans-serif;
  tamaño de fuente: 16px;
  color: $ color;
}
cuerpo {
  fondo: $ color;
  margen: 0;
  @incluye mi fuente (blanco);
}

Como podemos ver, SCSS (Sassy CSS) tiene una sintaxis similar a CSS, que es mucho más fácil de leer. Es una extensión de CSS, mientras que Sass tiene una sintaxis más diferente. Su extensión de archivo también es diferente: .sass y .scss.

Puedes leer más sobre esto aquí. Continuemos con las características de Sass.

Característica # 1: Variables

Varias clases CSS pueden contener la misma regla o reglas en un proyecto. Por ejemplo, tenemos 20 cuadros en nuestra página web con diferentes colores de fondo:

.box-1 {
   ancho: 100px;
   altura: 100 px;
   fondo: rojo;
}
.box-2 {
   ancho: 100px;
   altura: 100 px;
   fondo: amarillo;
}
...
.box-20 {
   ancho: 100px;
   altura: 100 px;
   fondo: azul;
}

Más tarde, nuestro cliente cambia de opinión y quiere cajas más grandes. Por lo tanto, necesito aumentar las propiedades de ancho y alto de cada clase una por una. Esto también podría ser 50 clases. En la programación de la vida real, esto puede ser frustrante. Como mencioné anteriormente, este es un ejemplo de gran esfuerzo para pequeños cambios.

¿Cómo podemos hacerlo de manera más eficiente?

Sass ofrece una solución: variables. Al igual que en otros lenguajes de programación, podemos usar variables para almacenar valores y reutilizarlos más tarde.

Definición de una variable:

$ nombre-variable: valor;

Volviendo al ejemplo anterior, si definimos variables para ancho y alto:

$ box-width: 100px;
$ box-height: 100px;

más tarde, cuando sea necesario un cambio, solo tenemos que cambiar sus valores una vez:

$ ancho de caja: 200 px; // cambió de 100 px a 200 px
$ box-height: 200px; // ¡eso es todo!
.box-1 {
   ancho: $ box-width; // usando variables ahora en lugar de píxeles
   altura: $ box-height;
   fondo: rojo;
}
.box-2 {
   ancho: $ box-width;
   altura: $ box-height;
   fondo: amarillo;
}
...
.box-20 {
   ancho: $ box-width;
   altura: $ box-height;
   fondo: azul;
}

CSS en sí mismo también admite variables ahora, pero no funciona en IE y versiones anteriores de otros navegadores:

https://caniuse.com/

Característica # 2: Anidamiento

CSS estándar no admite anidamiento. No podemos escribir una clase dentro de otra clase. A medida que el proyecto se hace más grande, esto trae un problema de legibilidad y la estructura no se ve bien.

Por ejemplo, definamos un menú de navegación con enlaces en los que se puede hacer clic en HTML a continuación:

HTML admite código anidado. Sin embargo, sin anidar, se ven así en CSS:

Clases CSS para el menú de navegación

Tuvimos que escribir nav para cada etiqueta, incluso para la pseudoclase del ancla (hover) porque nav es la etiqueta principal de todas. Sin embargo, Sass admite la anidación:

Las mismas clases con Sass

Aquí podemos escribir un código mejor estructurado como en HTML. No necesitamos escribir clase de navegación después de clase, lo que también evita la redundancia

Importante: No se recomienda anidar clases de más de 3 niveles.

Característica # 3: Mixins

Aprendimos anteriormente cómo usar variables para las reglas CSS. Pero, ¿qué pasa si necesitamos usar un grupo de reglas juntos? Sass tiene una característica llamada mixins, que nos permite hacerlo.

¿Qué es un mixin?

Los mixins son funciones Sass que agrupan declaraciones CSS juntas. Podemos reutilizarlos más tarde como variables.

Podemos crear un mixin con el comando @ mixin, seguido de un nombre:

@mixin my-font {
  Familia tipográfica: Arial, Helvetica, sans-serif;
  tamaño de fuente: 16px;
  estilo de fuente: cursiva;
}

o podemos crear un mixin como una función y agregar parámetros también:

$ font-color: rojo;
@mixin my-font ($ font-color) {
  Familia tipográfica: Arial, Helvetica, sans-serif;
  tamaño de fuente: 16px;
  estilo de fuente: cursiva;
  color: $ font-color;
}

Después de crear el mixin, podemos usarlo en cualquier clase con el comando @ include. Por lo tanto, podemos usar el mixin my-font en lugar de 4 líneas de reglas de fuente cada vez. Este enfoque simplifica el código.

pags {
  @incluye mi fuente;
}
Usar mixins es una buena manera de evitar la redundancia de código.

Característica # 4: Importaciones

Finalmente, podemos cortar nuestros enormes archivos CSS en partes más pequeñas con la función de importación Sass. Es mucho más fácil leer y mantener archivos más pequeños en lugar de un archivo grande con líneas interminables.

En realidad, CSS también tiene ahora una función de importación. Pero funciona de manera diferente. CSS envía una solicitud HTTP al servidor cada vez para importar un archivo. Sass lo hace sin una solicitud HTTP, que es un enfoque más rápido.

Todo lo que necesita hacer es importar su archivo Sass con el comando @ import a otro archivo Sass:

// Tu archivo Sass principal
@importar archivo';
@importar 'otro archivo';
.clase {
  // Tu codigo
}
No tenemos que usar las extensiones .scss en la ruta del archivo, Sass lo entenderá.

Estas son algunas características importantes de Sass, que nos ayudan a escribir código CSS más eficiente. También hay otras características agradables, tal vez pueda cubrirlas en otro artículo. Para una mejor comprensión, puede instalar Sass en su sistema. O puede comenzar a codificar directamente en codepen.io.

Espero que encuentre útil este artículo. Si hay algo que no comprende, comente sus preguntas a continuación.

Mira mi perfil para otros artículos:

Muchas gracias y hasta la próxima!

Esta historia se publica en The Startup, la publicación de emprendimiento más grande de Medium, seguida de +387,966 personas.

Suscríbase para recibir nuestras principales historias aquí.