@import e parziali in sass | Spiegato

L'acronimo di SASS per il foglio di stile sintatticamente fantastico è un pre-processore e l'estensione di CSS che è rinomata per i suoi file di codice puliti e leggibili che, di conseguenza, migliorano la capacità del linguaggio CSS di base. SASS ti consente di scrivere il codice CSS a secco (non ripetere te stesso) attraverso l'uso della regola @import. Ciò che questa regola è e fa in Sass insieme a parziali in Sass sono i soggetti in discussione in questo articolo.

Qual è la regola @import in sass

Proprio come CSS, SASS supporta anche la direttiva @import, che consente l'inclusione di un foglio di stile in un altro. Come estensione della regola CSS @IMport, la regola @IMport SASS consente l'importazione .Sass e .File SCSS. Inoltre, se stai importando un foglio di stile in un altro foglio di stile, questa regola darà accesso a variabili, mixin e funzioni del file importato sull'altro file.

Un altro vantaggio che questa regola SASS ha sulla regola CSS è che non viene effettuata alcuna richiesta HTTP aggiuntiva in fase di esecuzione quando viene chiamata la regola @IMport.

Sintassi

@IMport FilePath;

La regola SASS @IMport consente l'inclusione di entrambi i tipi, il che significa che è possibile includere file SASS in un file CSS o è possibile importare file CSS in un file SASS. Inoltre, puoi importare tutti i file che desideri nel file principale. I file che possono essere importati includono file di ripristino, colori, variabili, caratteri, ecc.

Alcuni esempi di regola @import in Sass sono i seguenti.

@import "caratteri";
@import "variabili";
@import "colori";

Diamo un'occhiata a un esempio per capire meglio questa regola.

Esempio

Supponiamo di avere un file con il file di nome1.Sass e assomiglia a questo.

Sass

H1
Font-Family: Verdana, sans-serif;
Font-size: 30px;
colore viola;

Abbiamo anche un altro file con il nome file2.Sass e ha il seguente codice.

Sass

P
Font-Family: Times New Roman, Serif;
Font-size: 20px;
colore blu;

Ora vogliamo importare entrambi questi file in un altro file con il nome principale.Sass. Useremo la regola @import per farlo.

@import file1, file2

Dopo aver compilato questo principale.File SASS Il nostro file di output CSS risultante apparirà così.

I file sono stati importati correttamente!

Nota: L'uso della regola @import è scoraggiato perché causa la denominazione dei conflitti in quanto dà accesso a tutte le funzioni, variabili, mixin, ecc. Inoltre, questo provoca anche problemi di sicurezza.

Parziali in Sass

I parziali in SASS sono considerati come quei file i cui nomi iniziano con un sottolinea. I parziali sono fatti solo in tali circostanze quando si importano un file e non si desidera che il tuo file venga traspirato direttamente da SASS.

Sintassi

_nome del file;

Ad esempio, il file mostrato di seguito è un "_font.File SCSS ".

$ fontsize: 20px;
$ fontfamily: Times New Roman;
$ Color: blu;

Il sottotitolo iniziale impedisce a questo file di traspirare ai caratteri.CSS. Tuttavia, quando si desidera importare questo file, non utilizzare il sottolineato.

Il sottotitolo iniziale impedisce a questo file di traspirare ai caratteri.CSS. Tuttavia, quando si desidera importare questo file, non utilizzare il sottolineato.
@import "caratteri"
H1
Font-size: $ Fontsize;
allineamento; centro;
Colore: $ Color;

In questo modo verrà importato il file Sass parziale.

Conclusione

La direttiva SASS @IMport consente l'inclusione di un foglio di stile in un altro e dà accesso a variabili, mixin, funzioni del file importato nell'altro file. Inoltre, non viene presentata alcuna richiesta HTTP aggiuntiva in fase di esecuzione quando viene chiamata la regola @import. Nel frattempo, i parziali in SASS sono considerati come quei file i cui nomi iniziano con un sottolinea. Entrambe queste entità sono discusse in profondità in questo articolo.