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';


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow