Vaarwel CSS, Hallo SCSS!

vaarwelcss

Je zou wel denken, waar heeft ze het nu weer over! Ik heb laatst nog een inleiding geschreven over CSS en don’t you worry die manier blijft gewoon bestaan want SCSS gebruikt de basis van CSS maar dan net een tikkeltje anders. SCSS oftewel Sassy Cascading Style Sheets is nog steeds standaard CSS alleen kan je nu combinaties maken, wiskundige formules ermee doen en nog een hele hoop meer, met als doel, nette en georganiseerde codes. Dat is wat je wilt vooral als je webdesigner bent, want hoe netter en georganiseerder, hoe beter de zoekmachines je website kunnen inlezen dus des te interessanter voor een klant. Wil je weten wat SCSS nu precies is, lees dan eventjes verder.

Wat is SCSS?

SCSS is een extensie van CSS dat de mogelijkheden en functionaliteit van CSS vergroot. Je kan gebruik maken van formules, combinaties, importeringen en nog een boel meer. Daarnaast zorgt SCSS ervoor dat jouw stylesheet geordend blijft, wat één van de redenen was dat ik hiervoor gekozen heb.

Mijn stylesheets werden groter door het aantal toevoegingen die ik in mijn eigen thema prop (portfolio, aparte templates, testimonials (wordt nog aangewerkt) en nog een aantal functies die allemaal andere styling nodig hebben.) Mijn thema werd een beetje een zooitje op zijn plat gezegd en ik had er genoeg van. Ook de thema’s voor cliënten breid ik uit met een hoop functies (opties om te veranderen van de layout, kleuren, lettertypes, et cetera) en ik was zo lang bezig om de stylesheet weer op orde te brengen dat ik heb besloten om vanaf nu al mijn thema’s met SCSS aan te passen. Dit ook om mijn hersenen om te schakelen want de codes schrijf je nog steeds zelf, maar het is makkelijk om in herhaling te vallen wat zorgt voor lelijke codes wat het bestand natuurlijk wel groter doet maken. Het is moeilijker om nette combinaties te maken en je stylesheet zo geordend mogelijk te hebben.

Voordeel SCSS ten opzichte van CSS?

Het voordeel van SCSS is dat je gebruik maakt van variables. Deze zijn vaak elders gespecificeerd, anders gezegd, je geeft elders aan hoe deze variable eruit ziet. Een variable herken je aan het dollarteken: $. Klinkt heel lastig maar dat is het niet.

In mijn stylesheet heb ik een aparte sectie voor de kleuren die ik gebruik in mijn layout. Het hartje in mijn footer heeft een rood-achtige kleur en heb ik als volgt gespecificeerd.

$heart: rgba(220, 100, 100, 1);

Om deze kleur vervolgens te gebruiken, pas ik het volgende toe in mijn stylesheet.

.color-accent {
color: $heart;
}

Wil ik deze kleur nu een keer veranderen, dan hoef ik dus alleen de variable aan te passen want de rest gaat automatisch. Ik link namelijk naar de variable $heart die ik eerder heb gemaakt en daar pakt hij de styling van.

Hoe ziet SCSS eruit?

Ik gebruik mijn eigen site als voorbeeld. Mijn body attribuut is als volgt gecodeerd in mijn SCSS stylesheet.

scss

css
Dit komt er in CSS zo uit te zien.

Er zijn zoveel mogelijkheden om gebruik te maken van SCSS dat ik er nog uren over kan doorpraten. Ik leer namelijk iedere dag weer nieuwe mogelijkheden bij. Het is zo leuk om mijzelf te ontwikkelen als web-designer en -developer dat ik door middel van dit artikel dat graag wil delen.

Waarom CSS én SCSS?

Kort gezegd, SCSS wordt niet ingelezen door een webbrowser en CSS wel. Daarom moet de SCSS die je schrijft, omgezet worden in CSS. SCSS is dus puur en alleen om er voor te zorgen dat je nette codes maakt en een geordende stylesheet hebt. Doe je dit als hobby dan maakt het niet zoveel uit natuurlijk, maar maak je websites voor anderen dan komt dat een stuk professioneler over. Tevens maakt het voor een webdesigner een stuk gemakkelijker om bepaalde functies te verwerken waarbij je eerst je rekenmachine nodig moest hebben. Dat hoeft nu niet, want SCSS rekent het uit voor jou!

Hoe converteer je SCSS naar CSS?

Ik wil hier binnenkort een apart artikel overschrijven, mits hiervoor interesse is. Momenteel heb ik de basis van SCSS onder de knie en dat heeft wat hoofdpijn gekost. Niet zozeer om SCSS te schrijven, maar meer om de programma’s werkende te krijgen die je nodig hebt. Één ding weet ik zeker, ik ga nooit meer terug naar normale CSS. Dit werkt nu zo fijn en alles wordt voor mij automatisch geconverteerd, gecontroleerd en geminimaliseerd. Ideaal!

Waar kan ik meer informatie vinden?

Geef een reactie