jan 27, 2016

«CSS-Inception» med SASS

Ifølge WordPress er kode poetri. Selv er jeg både poet og potet og jeg må føye til at kode noen ganger også er endeløs frustrasjon. CSS-filene kan fort bli uoversiktlige og en liten marginendring kan ende i unødvendig leting. Løsningen kan i mindre dokumenter være søk og «replace-all».

Men, søk blir fort tungvint når man ikke ønsker å endre alle marginer. I tillegg må kanskje nye marginer endres igjen for å passe til endringene. Men hva om vi kunne laget en variabel? Det er her SASS (må ikke forveksles med flyselskapet) kommer behjelpelig ned fra himmelen. Ved å forhåndsdefinere f.eks en margin, kan variabelen enkelt endres i ettertid. Følg med!

Først definerer vi en margin og farge:

$yellow: #ffff00;
$margin: 16px;

Deretter angir vi variabelen isteden for fargekoden og antall piksler som verdi:

.content {
background: $yellow;
margin: $margin;
}

SASS tillater også bruk av operatører som +(pluss), -(minus), *(gange), og /(deling). Så om vi ønsker halvparten av den definerte variablen ender vi slik:

.content {
background:  $yellow;
margin:  $margin/2;
}

Dette tilsvarer følgende CSS:

.content {
background:#ffff00;
margin: 8px;
}

Nå kan vi enkelt endre $margin-variabelen og vips har vi spart tid. Dette er rett og slett fantastisk når man sitter med store CSS filer. SASS (Syntactically Awesome Style Sheets) gjør jobb på større sider mye enklere.

Kort sagt er SASS en slags CSS inne i CSSèn. Litt som Inception altså. Ønsker du å sette deg mer inn i SASS og dens utallige muligheter kan du lese mer her: www.sass-lang.com . Lykke til!

PS: SASS vil ikke fungere lokalt før det er installert. Les mer her: Hvordan installere SASS