Formatos de Salida para los estilos en SASS

Si bien los formatos de Salida CSS que genera SASS por defecto son agradables y limpios, existen otras estructuras o formatos a los que podemos exportar nuestros estilos en SASS, cada formato es diferente y están hechos con un fin y sacarle el maximo provecho a esta herramienta que optimiza nuestros estilos CSS.

imagen: sass-lang.com

SASS nos da la posibilidad de exportar nuestros estilos CSS en 4 tipos de Formatos que veremos a continuación.

Notas:

• Hemos creado 2 carpetas en nuestro proyecto, una se llama css y la otra scss en ellas trabajaremos los ejemplos y dentro de cada carpeta hemos creamos un archivo llamado estilos.css y otro estilos.scss según el directorio que le corresponda.
• Cada ves que realizamos un cambio en el archivo estilos.scss se nos exporta en el archivo estilos.css el formato de salida que hayamos decidido generar en la consola de comandos.

Antes de pasar a los comandos, usaremos esta estructura básica de estilos que hemos creado en nuestro archivo estilos.scss

#contenedor {
  color: #444;
  background-color: #fff; }
  #contenedor p {
    width: 25em; }
 
.titulo {
  font-size: 14em;
  font-weight: 600;
  text-decoration: underline; }

Formato nested

Este formato es el que usa SASS por defecto, este estilo es anidado y se caracteriza por mostrar la estructura de los estilos CSS y los elementos HTML a los que se les aplica los estilos, la sangría no es fija y aumenta según la profundidad del elemento.

Para exportar en este formato abre tu consola de comandos y ejecuta el siguiente comando

sass --watch scss:css --style nested

Resultado:

#contenedor {
  color: #444;
  background-color: #fff; }
  #contenedor p {
    width: 25em; }

.titulo {
  font-size: 14em;
  font-weight: 600;
  text-decoration: underline; }

Formato expanded

Este formato es el creado digámoslo así por humanos, es el estilo tipico que parece haber sido escrito por un Frontend o Desarrollador Web manualmente, normalmente separa una línea de espaciado vertical y la sangría se mantiene en el mismo ancho para todos los elementos y propiedades CSS.

Para generar este formato ejecutamos el siguiente comando en nuestra consola de comandos

sass --watch scss:css --style expanded

Resultado:

#contenedor {
  color: #444;
  background-color: #fff; }

#contenedor p {
  width: 25em; }

.titulo {
  font-size: 14em;
  font-weight: 600;
  text-decoration: underline; }

Formato compact

Este formato de salida es genial ya que nos ocupa menos espacio en nuestro archivo CSS, nos ayuda a que pese menos este archivo, mantiene en una linea los propios estilos del elemento mencionado, así que es fácil identificar a que elemento le pertenece dichas propiedades CSS.

Si queremos generar este formato, ejecutamos el siguiente comando

sass --watch scss:css --style compact

Resultado:

#contenedor { color: #444; background-color: #fff; }

#contenedor p { width: 25em; }

.titulo { font-size: 14em; font-weight: 600; text-decoration: underline; }

Formato compressed

Este último formato comprime estrictamente los elementos y sus propiedades CSS, ocupa la mínima cantidad de espacio posible, solo crea espacios en blanco para separar los selectores, el archivo pesa menos, esto ayuda a mejorar la velocidad de carga de tu proyecto web para tus visitantes y para el SEO.

Para generar este formato comprimido ejecutamos el siguiente comando

sass --watch scss:css --style compressed

Resultado:

#contenedor{color:#444;background-color:#fff}#contenedor p{width:25em}.titulo{font-size:14em;font-weight:600;text-decoration:underline}

Como puedes apreciar, existen 4 tipos de formato que  hasta la fecha de este artículo SASS nos permite hacer y cada uno nos sirve para diferentes objetivos.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.