sass
Parziali e importazione
Ricerca…
Importazione
L'uso di @import ti consente di suddividere i tuoi file in file più piccoli. Questo ha senso, dato che puoi mantenere una struttura migliore per i tuoi fogli di stile ed evitare file molto grandi.
Esempio
Diciamo che hai qualche file.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Il tuo foglio di stile principale application.scss può importare tutti i file e definire i propri stili.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Nota che puoi anche omettere l'estensione .scss modo da poter scrivere @import 'header'; invece di @import 'header.scss' .
Questo porta a application.scss con tutti gli .scss importati inclusi nel file compilato che servi al client (browser). In questo caso il tuo file compilato sarebbe application.css che includi nel tuo html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Sebbene tu stia lavorando con più file, servi solo un file, eliminando la necessità di richieste multiple (una per ogni file) e accelerando il tempo di caricamento per i tuoi visitatori.
Vantaggi principali
- Struttura migliore per lo sviluppo utilizzando la cartella e più file
- Serve solo un file al client (browser)
parziali
Puoi creare file parziali contenenti frammenti più piccoli dei tuoi fogli di stile. Ciò ti consente di modulare il tuo CSS e consente una migliore struttura dei tuoi fogli di stile. Un partial è un file Sass chiamato con un trattino basso, cioè: _partial.scss . Il trattino basso consente a Sass di sapere che il file specifico è parziale e non verrà generato in un file CSS.
I partial Sass sono pensati per essere usati con la direttiva @import . Quando si utilizza @import , è possibile omettere il trattino basso principale.
Esempio
Supponendo che tu abbia una struttura di file con partial come questo
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Puoi includere quei main.scss nel tuo file main.scss come segue (i sottolineature main.scss e le estensioni di file sono omessi in questo esempio):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';