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.
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.