Sass - Estilo de salida

En este capítulo, estudiaremos sobre SASS Output Style. El archivo CSS que genera el SASS consta de un estilo CSS predeterminado, que refleja la estructura del documento. El estilo CSS predeterminado es bueno, pero puede que no sea adecuado para todas las situaciones; por otro lado, SASS admite muchos otros estilos.

Admite los siguientes estilos de salida diferentes:

:anidado

El estilo anidado es el estilo predeterminado de SASS. Esta forma de estilo es muy útil cuando se trata de archivos CSS de gran tamaño. Hace que la estructura del archivo sea más legible y fácil de entender. Cada propiedad tiene su propia línea y la sangría de cada regla se basa en qué tan profundamente está anidada.

Por ejemplo, podemos anidar el código en el archivo SASS como se muestra a continuación:

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expandido

En el tipo expandido de estilo CSS, cada propiedad y regla tiene su propia línea. Toma más espacio en comparación con el estilo CSS anidado. La sección Reglas consta de propiedades, todas ellas previstas dentro de las reglas, mientras que las reglas no siguen ninguna sangría.

Por ejemplo, podemos expandir el código en el archivo SASS como se muestra a continuación:

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compacto

El estilo CSS compacto ocupa menos espacio de forma competitiva que Expanded y Nested. Se centra principalmente en los selectores más que en sus propiedades. Cada selector ocupa una línea y sus propiedades también se colocan en la misma línea. Las reglas anidadas se colocan una al lado de la otra sin una nueva línea y los grupos de reglas separados tendrán nuevas líneas entre ellos.

Por ejemplo, podemos compactar el código en el archivo SASS como se muestra a continuación:

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:comprimido

El estilo CSS comprimido ocupa la menor cantidad de espacio en comparación con todos los demás estilos discutidos anteriormente. Proporciona espacios en blanco solo para separar selectores y una nueva línea al final del archivo. Esta forma de diseñar es confusa y no es fácil de leer.

Por ejemplo, podemos comprimir el código en el archivo SASS como se muestra a continuación:

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}