Sass - Direttive di importazione

Descrizione

Importa direttive, importa i file SASS o SCSS. Richiede direttamente il nome del file da importare. Tutti i file importati in SASS verranno combinati in un unico file CSS. Ci sono poche cose che vengono compilate in un CSS quando usiamo la regola @import -

Estensione file .css
Il nome del file inizia con http: //
Il nome del file è url ()
@import consiste in qualsiasi media query.

Ad esempio, crea un file SASS con il codice seguente:

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Il codice sopra verrà compilato nel file CSS come mostrato di seguito -

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

Di seguito sono riportati i modi per importare i file utilizzando la regola @import :

Parziali

I parziali sono file SASS o SCSS, che vengono scritti utilizzando un trattino basso all'inizio del nome (_partials.scss). Il nome del file parziale può essere importato nel file SASS senza utilizzare il trattino basso. SASS non compila il file CSS. Utilizzando il carattere di sottolineatura, fa capire a SASS che è parziale e non dovrebbe generare il file CSS.

@Import annidato

La direttiva @import può essere inclusa nelle regole @media e nelle regole CSS. Il file di livello base importa il contenuto dell'altro file importato. La regola di importazione è nidificata nello stesso punto della prima @import .

Ad esempio, crea un file SASS con il seguente codice:

.container {
   background: #ffff;
}

Importa il file sopra nel seguente file SASS come mostrato di seguito -

h4 {
   @import "example";
}

Il codice sopra verrà compilato nel file CSS come mostrato di seguito -

h4 .container {
   background: #ffff;
}

Sintassi

Di seguito è riportata una sintassi, utilizzata per importare i file, nel file SCSS -

@import 'stylesheet'

Esempio

L'esempio seguente mostra l'uso di @import nel file SCSS:

import.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

Quindi, crea il file _partial.scss .

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

Quindi, crea il file style.scss .

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in import.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page