Labb3/4/5

Om att använda SASS

Vissa delar av denna laboration var svårare än andra att börja med. Själva färgschemat (mörk/ljust tema) var inte alltför problematiskt. Likaså color functions.

Det som bjöd på mest motstånd var egentligen nesting, för min del: komiskt, då det egentligen inte är mycket annat än att man lägger till det element som finns inuti ett annat inom samma css. Problemet där var att jag kunde bli lite överentusiastisk och plötsligt hade lite väl många måsvingar att hantera.

Fördelar

Nesting och partials är användbara för att göra koden mer läsbar och lättare att sortera i "kategorier" för sig själv. Med detta syftar jag på att man kan göra specifika partials/scss-filer som hanterar vissa delar av koden utan att man behöver scrolla igenom en lång vägg av kod för att hitta det som man vill ändra eller lägga till. Det som tillhör navigeringen går att hitta i partial som heter navigering, till exempel.

Det går vidare att "banta ner" koden något. Istället för att upprepa samma rader med ytterligare ett element på slutet (exempelvis nav ul li a) så går det, via nesting, att helt enkelt "lägga till" ett element i samma grupp och bygga vidare. Ungefär som att lägga till legobitar för att bygga ett torn.

Variabler i sin tur är relativt rättframma att skapa. Huvudsaken är att man inte är alltför vag om man vill vara specifik med exakt vart färgen ska. Det går vidare fort att kontrollera, när det gäller färg variabler, vilken färgen egentligen är. Det gör det enkelt att skapa föränderliga färgscheman.

If/else kan jag se nyttan av ifall man snabbt vill byta utseende på statiska delar, eller om man har element av samma typ (t.ex. knappar) som man vill skapa olika utseenden för utan att skriva mycket kod på varenda en. Det är simpelt att göra if/else och bara ändra egenskapen (se sidan If/Else där knappar har ändrat storleksordning). Det påminner lite grann om @media, att innehållets styling ska ändras vid ett visst tillfälle.

Selector inheritance fann jag ganska användbar för att inte behöva upprepa samma stil om och om igen på de platser där jag ville ha samma styling: ville jag ha något ytterligare var det enkelt att lägga till några ytterligare rader på det andra elementet/klassen.

Nackdelar

Som tidigare nämnt hade jag lite problem med nesting: när jag väl var klar med det jag ville göra försökte jag städa upp/sortera in det som kunde "gå in" i varandra. Men detta skapade problem, särskilt med hamburgermenyn: element hamnade på fel plats så att menyn slutade fungera som planerat. En tanke för framtiden är att göra nesting FÖRST: att försöka rätta upp det i efterhand kan bjuda på huvudvärk.

Som tidigare nämnt hade jag lätt att förlora mig i nesting: plötsligt satt jag där och hade alldeles för många måsvingar.

Partials kan, precis som med nesting, också bli många om man inte är försiktig. Man kanske bestämmer sig för att allt med knappar att göra ska ha en partial, och allt som har med bilder att göra ska ha en partial. När någonting sedan inte fungerar som det ska kan det bli lite knepigt att lista ut vilken partial det är som problemet ligger i.

(Jag upptäckte detta genom att ha desktop navigering css i huvud scss filen. Jag skapade även en partial som hette breakpoints där jag från början hade planerat att ha mina brytpunkter, som hamburgermenyn. För att göra hamburgermeny arbetade jag i min partial, men upptäckte senare att ingenting fungerade. Visade sig att detta sätt gjorde att hamburgermenyn blev för evigt dold. Gick att lösa genom att flytta all navigation till en egen partial och ta bort breakpoints partial istället)

Med variabler finns faran att om man inte är försiktig kan man blanda ihop vad som är vad, särskilt om man har många variabler.

Sammanfattning

Allt detta nya finns det nytta för: man kan sortera upp sin kod i egna filer som senare slås ihop till en enda efter kompilering och på det viset lättare skilja på vad som orsakar vad. Det blir en mer överskådlig kod: lättare att hantera problem eller lägga till kod. Man får själv välja vad som händer med webbplatsen vid olika lägen (t.ex. vilka färger som syns vid mörkt/ljust tema).

Problemet för en nybörjare är det gamla vanliga: att lära sig och komma in i rytmen av att använda mixins, nesting, variabler med mera.