SASS

Arbetet med SASS

I laboration 3 har SASS använts som CSS-preprocessor där syftet varit att utforska hur man kan skriva en mer modulär och återanvändbar CSS-kod och förstå hur bland annat variabler, mixins och nesting fungerar i praktiken. Att arbeta med SASS har fungerat bra, men det är tydligt att det krävs övning i att hantera detta på ett sätt där arbetet blir mer effektivt än med vanlig CSS.

Hur SASS använts

I arbetet har jag använt SASS för följande:

• Partials: Flera scss-filer för olika delar och komponenter i webbplatsen.
• Variabler: För färgscheman för ljust/mörkt (darken/lighten), navigationsmeny och knappar.
• Mixins: Två olika set med regler som sätt för två olika bildstorlekar.
• Nesting: För att gruppera och lättare skriva ut koden för navigation och banner.
• Selector inheritance (@extend): Har på ett enkelt sätt använt detta för grundinställning på text, och har sedan lagt extended med ytterligare regler bland annat bakgrundsfärg för en "add on"- text som kan ses i exemplet nedan.
• If/else: För olika regler som styr färg på knapp.

Fördelar

Genom att använda SASS har utvecklingsarbetet underlättats på flera sätt. Det blir enklare att genomföra ändringar på hela webbplatsen genom att använda sig av variabler där ändring bara behöver ske i just dessa.

Det är enkelt att sätta samma stil/regler för separata element utan att behöve upprepa samma kod, detta med hjälp av mixins.

Det som har underlättat mest i arbetet är dock uppdelning av kod i partials vilket har gjort betydligt mer överskåldigt än i tidigare projekt.

Utmaningar/Nackdelar

Men det fanns även vissa utmaningar. Initialt var det klurigt att förstå hur bland annat variabler skulle refereras till och vad som krävdes för att innehållet som skapats i separata partials skulle kunna gå att användas på flera ställen.

Innan detta klurats ut var det även svårt att ge en bra struktur till flera partials. 7-1 strukturen användes till en början, men kändes snabbt överflödig för projektet. Det var även svårt att med invanda mönster med upplägg i vanlig CSS-fil tänka om vart logisk för olika delar bland annat media queries bör ligga. Detta är något som i nuläget är den största bristen i min filstruktur, och behöver filas på.

Nackdelar för en som inte har vanan inne är att det kan vara svårt att förstå poängen med if-satser framför tex media queries. Men detta ser jag kan bli tydligare vid större projekt och mer kod som ska hanteras och effektiviseras. Men här var det svårt att hitta ett användningsormråde där det var smidigare att använda if-sats.

Att tänka på vidare för kommande projekt där SASS används är att från början skapa en god struktur för filer med en plan på vart varje del eller komponent ska ligga för att underlätta i utvecklingsarbetet och faktiskt dra nytta av funktionenen med att använda sig av partials. Initialt var det klurigt att förstå hur bland annat variabler skulle refereras till och vad som krävdes för att innehållet som skapats i separata partials skulle kunna gå att användas på flera ställen.