Vill du sammanfatta dina CSS-filer överskådligt och effektivt? Sass ger dig möjlighet att importera och kombinera olika SCSS-filer. I den här guiden visar jag dig hur du gör det och vad du ska tänka på.
Videon laddas från YouTube först när den spelas upp – då överförs uppgifter (bl.a. IP-adressen) till YouTube/Google. Mer i integritetspolicyn
Viktigaste insikter
- Importera SCSS-filer med @import för att sammanfoga dem i en central fil.
- Använd ett inledande understreck (_) i filnamnet för att förhindra att en separat CSS-fil genereras.
- En central kontrollfil hjälper dig att hålla din Sass-kod organiserad.
Steg-för-steg-guide
Först klargör du vilken syntax du vill använda. Sass har två syntaxalternativ: den klassiska Sass-syntaxen och SCSS-syntaxen. Jag rekommenderar SCSS-syntaxen eftersom den ger dig mer flexibilitet, särskilt om du vill använda befintlig CSS utan att behöva justera den.
Nu är det dags att öppna din projektmapp. Skapa dina SCSS-filer i en överskådlig mapp. Du kan ha flera SCSS-filer som var och en hanterar olika stylingaspekter av din webbplats.
Anta att du redan har skapat flera SCSS-filer. Du måste nu tänka på hur du vill importera dessa filer. Använd @import-instruktionen för att importera SCSS-filerna i en huvudfil, som till exempel app.scss.
För att skapa import-instruktionen skriver du helt enkelt @import 'din_fil'; i din huvudfil. Om du inte vill använda CSS-suffix kan du utelämna dem. Det gör det mer överskådligt och enklare att hantera filerna.
En särskilt praktisk trick är att använda ett inledande understreck i filnamnet. Om du till exempel skapar en fil som heter _fong.scss, kommer den inte att genereras som en separat CSS-fil. Detta gör det lättare att hantera filer i ditt projekt, eftersom onödiga CSS-filer undviks.
Nu kan du titta på din huvud-SCSS-fil. Du kommer inte att se den importerade filen som en separat CSS-fil, vilket håller din utdata prydlig. Det betyder att du enkelt kan hantera dina stilar i en fil.
Skapa en central kontrollfil. Döp den till exempel till app.scss. Denna kontrollfil kommer att innehålla import-instruktionerna för alla dina SCSS-filer. Så får du en bra översikt över hela stylingen av ditt projekt.
Om du använder underkataloger, var medveten om att du måste ange katalognamnet i import-instruktionen. Det möjliggör att du fortfarande kan hålla strukturen i ditt projekt tydlig och överskådlig.
Ordningen för imports är avgörande. Senare stilar kan överskrida tidigare. Var noga med att importera dem i önskad ordning för att undvika oönskade överskrivningar.
När allt är infogat och du har kopplat samman SCSS-filerna rent i din huvudfil kan du kompilera projektet och kontrollera CSS-filen. Du kommer att se att tillämpningen av alla dina stilar finns i en och samtidigt minimerar antalet HTTP-förfrågningar.
Sammanfattning
Genom att använda @import i kombination med تنظيق (understrich) i filnamnet kan du effektivt sammanfoga SCSS-filer och öka överskådligheten i ditt stylesheets. En central kontrollfil ser dessutom till att strukturen är tydlig.
Vanliga frågor
Hur växlar jag mellan Sass och SCSS?Du kan helt enkelt ändra syntaxen och importanvisningarna; SCSS är mer flexibelt.
Vilka fördelar har understrecket i filnamnet?Det förhindrar att filen genereras som en separat CSS-fil, vilket ökar överskådligheten.
Hur kan jag organisera mina SCSS-filer bättre?Använd underkataloger och en central kontrollfil för att skapa struktur i ditt projekt.
