SASS – utvärdering

Detta är första gången jag använder SASS. Tidigare har jag använt vanlig CSS i kurser inom programmet samt i två kurser innan programmet. Jag tyckte inte att det var svårt att komma igång med Sass. Det vara bara ett nytt tänkesätt att jobba modulärt, vilket jag tycker är bra.

Nedan följer en jämförelse mellan SASS och CSS. Följande områden behandlas:

Variabler

I detta projekt används variabler i SASS för att lagra färgschema. Detta gör det enkelt att ändra designen på ett ställe.

CSS har också stöd för variabler, men i detta projekt upplevdes SASS-variabler som lättare att organisera tillsammans med partials och @use.

Color functions

SASS har inbyggda färgfunktioner som darken() och lighten(). Dessa används för att skapa variationer av samma färg, till exempel vid hover-effekter som jag har på stats10-sidans knappar.

CSS kan lösa liknande saker, men ofta med mer kod och mindre tydlighet.

Nesting

Både SASS och modern CSS stödjer nesting. I detta projekt används nesting i SASS för att samla relaterade stilar och tydligare koppla CSS till HTML-strukturen.

Detta gjorde koden mer lättläst i ett projekt med flera sidor.

Mixins

Mixins används i SASS för att återanvända kod, till exempel för flexbox-layout ,media queries eller i mitt fall genom att ändra stil på bilder tillsammans med en if-sats för att bestämma hur stil ska appliceras.

CSS saknar en motsvarighet, vilket gör mixins till en fördel för att samla lika stilar och styra vad som ska appliceras.

Selector inheritance (@extend)

Med @extend kan flera selektorer dela samma grundstil. Detta minskar upprepning och ger renare CSS i den färdiga builden.

CSS har ingen exakt motsvarighet till denna funktion, även om det går att gruppera selektorer för att dela på stil är det inte riktigt samma ska eftersom sass-extends styr bättre hur stil kan delas.

If/else-satser

SASS stödjer villkorssatser med @if och @else. Detta gör det möjligt att anpassa stilar baserat på logik. Jag har satt if-sats i min mixin för att bestämma om man applicerar object-fit eller inte.

CSS saknar den logik och Sass har återigen en fördel.

Partials

Projektet använder flera SASS-partials där varje fil har ett ansvar, variabler, mixin används i filer som behöver dem och i layout finns partials som tillhör den globala stilen.

Detta gör det effektivt att dela upp partials för ansvar och verkan.

Filstruktur för CSS-kod

SASS ger en tydlig filstruktur där CSS-koden delas upp i flera mindre filer efter ansvar och vad den ska göra.

Detta gjorde projektet enklar att jobba med samt att felsöka jämfört med att samla all CSS i en enda stor fil.

Build och optimering i Vite.js

När npm run build körs kompileras SASS till vanlig CSS som minifieras och optimeras av Vite.

Endast den färdiga CSS-koden skickas till produktion i dist-mappen vilket minskar laddningstiden.

Sammanfattning

SASS har en högre inlärningströskel än CSS, men ger fördelar när det gäller struktur, återanvändning och underhåll. Jag tycket att det fungerade bra med SASS ,ES6-moduler och build-processen.