Sass - Stile di output

In questo capitolo, studieremo SASS Output Style. Il file CSS generato dal SASS è costituito da uno stile CSS predefinito, che riflette la struttura del documento. Lo stile CSS predefinito è buono ma potrebbe non essere adatto a tutte le situazioni; d'altra parte, SASS supporta molti altri stili.

Supporta i seguenti diversi stili di output:

:nidificato

Lo stile annidato è lo stile predefinito di SASS. Questo modo di applicare lo stile è molto utile quando hai a che fare con file CSS di grandi dimensioni. Rende la struttura del file più leggibile e facilmente comprensibile. Ogni proprietà prende la propria linea e il rientro di ogni regola si basa su quanto profondamente è annidato.

Ad esempio, possiamo annidare il codice nel file SASS come mostrato di seguito -

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

#first p {
   width: 10em; 
}

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

:allargato

Nello stile CSS espanso, ogni proprietà e regola ha la propria riga. Richiede più spazio rispetto allo stile CSS annidato. La sezione Regole è costituita da proprietà, tutte intese all'interno delle regole, mentre le regole non seguono alcun rientro.

Ad esempio, possiamo espandere il codice nel file SASS come mostrato di seguito -

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

#first p {
   width: 10em;
}

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

:compatto

Lo stile CSS compatto occupa meno spazio in modo competitivo rispetto a Expanded e Nested. Si concentra principalmente sui selettori piuttosto che sulle sue proprietà. Ciascun selettore occupa una riga e anche le sue proprietà sono collocate nella stessa riga. Le regole nidificate sono posizionate una accanto all'altra senza una nuova riga e i gruppi separati di regole avranno nuove linee tra di loro.

Ad esempio, possiamo compattare il codice nel file SASS come mostrato di seguito -

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

#first p { 
   width: 10em; 
}

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

: compresso

Lo stile CSS compresso occupa la minor quantità di spazio rispetto a tutti gli altri stili discussi sopra. Fornisce spazi bianchi solo per separare i selettori e la nuova riga alla fine del file. Questo modo di disegnare è confuso e non è facilmente leggibile.

Ad esempio, possiamo comprimere il codice nel file SASS come mostrato di seguito -

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

#first p { 
   width:10em 
} 

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