Sass - Style de sortie

Dans ce chapitre, nous étudierons SASS Output Style. Le fichier CSS généré par le SASS se compose du style CSS par défaut, qui reflète la structure du document. Le style CSS par défaut est bon mais peut ne pas convenir à toutes les situations; d'autre part, SASS prend en charge de nombreux autres styles.

Il prend en charge les différents styles de sortie suivants -

: imbriqué

Le style imbriqué est le style par défaut de SASS. Cette façon de styliser est très utile lorsque vous traitez de gros fichiers CSS. Il rend la structure du fichier plus lisible et peut être facilement comprise. Chaque propriété prend sa propre ligne et l'indentation de chaque règle est basée sur la profondeur de son imbrication.

Par exemple, nous pouvons imbriquer le code dans un fichier SASS comme indiqué ci-dessous -

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

#first p {
   width: 10em; 
}

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

:étendu

Dans le type étendu de style CSS, chaque propriété et règle a sa propre ligne. Cela prend plus de place que le style CSS imbriqué. La section Rules se compose de propriétés, qui sont toutes prévues dans les règles, tandis que les règles ne suivent aucune indentation.

Par exemple, nous pouvons développer le code dans le fichier SASS comme indiqué ci-dessous -

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

#first p {
   width: 10em;
}

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

:compact

Le style CSS compact prend moins de place de manière compétitive que Expanded et Nested. Il se concentre principalement sur les sélecteurs plutôt que sur ses propriétés. Chaque sélecteur occupe une ligne et ses propriétés sont également placées sur la même ligne. Les règles imbriquées sont positionnées les unes à côté des autres sans nouvelle ligne et les groupes de règles séparés auront de nouvelles lignes entre eux.

Par exemple, nous pouvons compacter le code dans le fichier SASS comme indiqué ci-dessous -

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

#first p { 
   width: 10em; 
}

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

:comprimé

Le style CSS compressé prend le moins d'espace par rapport à tous les autres styles décrits ci-dessus. Il fournit des espaces uniquement pour séparer les sélecteurs et le retour à la ligne à la fin du fichier. Cette façon de styliser est déroutante et n'est pas facilement lisible.

Par exemple, nous pouvons compresser le code dans le fichier SASS comme indiqué ci-dessous -

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

#first p { 
   width:10em 
} 

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