@Import og Partials in Sass | Forklart

Sass-forkortelse for syntaktisk fantastiske stilark er en forprosessor og utvidelse av CSS som er kjent for sine rene og lesbare kodefiler som som et resultat forbedrer muligheten til det grunnleggende CSS-språket. Sass lar deg skrive tørr (ikke gjenta deg selv) CSS -kode gjennom bruken av @import -regelen. Hva denne regelen er og gjør i Sass sammen med partier i Sass er emnene som diskuteres i denne artikkelen.

Hva er @import -regelen i Sass

Akkurat som CSS støtter Sass også @import -direktivet, som tillater inkludering av ett stilark i et annet. Som en utvidelse av CSS @import -regelen tillater SASS @import -regelen import .sass og .SCSS -filer. Hvis du importerer ett stilark i et annet stilark, vil denne regelen dessuten gi tilgang til variabler, mixins og funksjoner til den importerte filen til den andre filen.

En annen fordel som denne SASS -regelen har over CSS -regelen er at det ikke blir gitt noen ekstra HTTP -forespørsel på kjøretid når @import -regelen kalles.

Syntaks

@import filepath;

SASS @import -regelen tillater inkludering av begge typer, noe som betyr at du kan inkludere SASS -filer i en CSS -fil, eller du kan importere CSS -filer i en SASS -fil. Dessuten kan du importere så mange filer du ønsker i hovedfilen. Filer som kan importeres inkluderer tilbakestillingsfiler, farger, variabler, skrifter osv.

Noen eksempler på @importregel i Sass er som følger.

@import "Fonter";
@import "variabler";
@import "farger";

La oss se på et eksempel for å forstå denne regelen bedre.

Eksempel

Anta at vi har en fil etter navnet File1.sass og det ser ut som dette.

Sass

H1
Font-Family: Verdana, Sans-serif;
Font-størrelse: 30px;
Farge: lilla;

Vi har også en annen fil med navnet File2.sass og har følgende kode.

Sass

P
Font-Family: Times New Roman, Serif;
Font-størrelse: 20px;
Farge: blå;

Nå vil vi importere begge disse filene til en annen fil som har navnet Main.sass. Vi vil bruke @import -regelen for å gjøre det.

@import File1, File2

Etter å ha sammenstilt denne hoved.SASS -fil vår resulterende CSS -utgangsfil vil vises slik.

Filer ble importert med hell!

Merk: Bruken av @import -regelen frarådes fordi den forårsaker navnekonflikter, da den gir tilgang til alle funksjoner, variabler, mixins osv. Til den andre filen. Dessuten forårsaker dette også sikkerhetsproblemer.

Delvis i Sass

Delvis i Sass blir sett på som de filene hvis navn starter med en understreking, og disse blir ikke transpilert direkte. Delvis er bare laget under disse omstendighetene når du importerer en fil og ikke vil at filen din skal transpileres direkte av SASS.

Syntaks

_filnavn;

For eksempel er filen vist nedenfor en "_font.SCSS ”-fil.

$ FontSize: 20px;
$ fontfamily: Times New Roman;
$ farge: blå;

Startundersøkelsen forhindrer denne filen fra å transpilere til skrifter.CSS. Imidlertid, når du ønsker å importere denne filen, ikke bruk understreken.

Startundersøkelsen forhindrer denne filen fra å transpilere til skrifter.CSS. Imidlertid, når du ønsker å importere denne filen, ikke bruk understreken.
@import "Fonter"
H1
Font-størrelse: $ FontSize;
tekst-align; senter;
Farge: $ farge;

På denne måten vil den delvise SASS -filen bli importert.

Konklusjon

SASS @import -direktivet tillater inkludering av ett stilark i et annet og gir tilgang til variabler, mixins, funksjoner av den importerte filen til den andre filen. Dessuten fremmes ingen ekstra HTTP -forespørsel på kjøretid når @import -regelen kalles. I mellomtiden blir partier i Sass sett på som de filene hvis navn starter med en understreking, og disse blir ikke transpilert direkte når du importerer dem. Begge disse enhetene er diskutert i dybden i denne artikkelen.