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
Can you explain what a Sass partial is and why the filename starts with an underscore?
How does the folder structure help in organizing large Sass projects?
Can you show an example of how to use variables from one partial in another?
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!
