Organisering av Sass-filer for skalerbare prosjekter
Noen ganger kan det være utfordrende å skrive all koden i én fil. Sass gjør det mulig å dele opp koden i ulike filer og mapper. Dette forenkler vedlikehold og omstrukturering av koden.
sass-mappe
Første oppgave er å opprette mappen sass i prosjektets rotmappe. På denne måten informerer vi kompilatoren om at vi bruker sass i prosjektet.
sass-mappeorganisering
I sass-mappen:
- Vi oppretter filen
main.scss. Dette er hovedfilen for kompilatoren. Vi kobler alle fragmenter til denne filen ved hjelp av@import-direktivet; - Vi oppretter ulike mapper for sass-partials. (For eksempel,
utilities-mappen for variabler,components-mappen for gjentakende stiler for enkelte elementer,base-mappen for globale stiler og tilbakestilling av standard elementoppførsel, oglayouts-mappen for ikke-gjentakende stiler).
partials
Nå er vi klare til å legge til filer og skrive sass-kode for å tildele stiler til elementene. For å opprettholde strukturen, oppretter vi én fil for hver funksjon. Filnavnet må starte med understrek (_). For kompilatoren betyr dette at det ikke er hovedfilen. Det er en partial.
Hele strukturen er klar. Vi kan importere alle filene til main.scss-filen ved hjelp av @import-direktivet. Rekkefølgen er viktig. For eksempel, hvis vi ønsker å bruke noen variabler fra _variables.scss-filen i _button.scss-filen, må vi sørge for at importen av _variables.scss-filen står høyere enn importen av _button.scss-filen inne i main.scss-filen.
Syntaksen for å importere en fil er følgende. Vi bruker @import, og doble anførselstegn ("") for å angi riktig sti til filen.
@import "path";
Resultatinnholdet i main.scss-filen er som følger:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Merk
Vi har gjennomgått det grunnleggende om sass-preprosessoren som gjør det mulig å bruke den i prosjekter. Imidlertid har enhver preprosessor et stort antall ulike funksjoner. Å dekke alle disse er utenfor rammen for dette kurset.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.04Organisering av Sass-filer for skalerbare prosjekter
Sveip for å vise menyen
Noen ganger kan det være utfordrende å skrive all koden i én fil. Sass gjør det mulig å dele opp koden i ulike filer og mapper. Dette forenkler vedlikehold og omstrukturering av koden.
sass-mappe
Første oppgave er å opprette mappen sass i prosjektets rotmappe. På denne måten informerer vi kompilatoren om at vi bruker sass i prosjektet.
sass-mappeorganisering
I sass-mappen:
- Vi oppretter filen
main.scss. Dette er hovedfilen for kompilatoren. Vi kobler alle fragmenter til denne filen ved hjelp av@import-direktivet; - Vi oppretter ulike mapper for sass-partials. (For eksempel,
utilities-mappen for variabler,components-mappen for gjentakende stiler for enkelte elementer,base-mappen for globale stiler og tilbakestilling av standard elementoppførsel, oglayouts-mappen for ikke-gjentakende stiler).
partials
Nå er vi klare til å legge til filer og skrive sass-kode for å tildele stiler til elementene. For å opprettholde strukturen, oppretter vi én fil for hver funksjon. Filnavnet må starte med understrek (_). For kompilatoren betyr dette at det ikke er hovedfilen. Det er en partial.
Hele strukturen er klar. Vi kan importere alle filene til main.scss-filen ved hjelp av @import-direktivet. Rekkefølgen er viktig. For eksempel, hvis vi ønsker å bruke noen variabler fra _variables.scss-filen i _button.scss-filen, må vi sørge for at importen av _variables.scss-filen står høyere enn importen av _button.scss-filen inne i main.scss-filen.
Syntaksen for å importere en fil er følgende. Vi bruker @import, og doble anførselstegn ("") for å angi riktig sti til filen.
@import "path";
Resultatinnholdet i main.scss-filen er som følger:
@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";
Merk
Vi har gjennomgått det grunnleggende om sass-preprosessoren som gjør det mulig å bruke den i prosjekter. Imidlertid har enhver preprosessor et stort antall ulike funksjoner. Å dekke alle disse er utenfor rammen for dette kurset.
Takk for tilbakemeldingene dine!
