Slik bruker du Sass til ryddig og fleksibel CSS i ekte prosjekter

Mange starter med ren CSS og oppdager etter hvert at stilarket blir uoversiktlig, gjentakende og tungt å vedlikeholde. Da er det lett å miste kontrollen, spesielt når prosjektet vokser og flere jobber på samme kodebase.

Sass er et verktøy som bygger på vanlig CSS og hjelper deg å strukturere stilen bedre, uten at du må lære et helt nytt språk. Her får du en praktisk og jordnær innføring i hvordan du faktisk kan bruke Sass i hverdagen.

Hva er Sass, helt konkret?

Sass er en CSS-preprosessor. Det betyr at du skriver i et litt utvidet CSS-format, og så kompileres dette til helt vanlig CSS som nettleseren kan lese. Brukeren ser ikke at Sass er involvert, den får bare en vanlig .css-fil.

Den viktigste gevinsten er at du får verktøy som variabler, funksjonslignende mixins, arving og mulighet til å dele opp koden i mange små filer som settes sammen til ett stilark.

SCSS-syntaks: derfor føles Sass kjent

Sass har to syntaksvarianter, men i dag er SCSS klart mest vanlig. SCSS ligner nesten 1:1 på normal CSS, bare med flere muligheter på toppen. Enhver gyldig CSS er også gyldig SCSS.

Et enkelt SCSS-eksempel kan se slik ut:

Eksempel:

SCSS

$primary-color: #2563eb;
button {
background: $primary-color;
color: white;
}

Kompilert CSS

button {
background: #2563eb;
color: white;
}

Variabler: slutt på manuell fargejakt

Et av de tydeligste første stegene med Sass er å flytte gjentatte verdier inn i variabler. I stedet for å endre samme farge 15 steder, justerer du én verdi.

Et enkelt oppsett kan se slik ut:

$color-primary: #2563eb;
$color-primary-dark: #1d4ed8;
$color-text: #111827;
$spacing-unit: 1rem;

body {
color: $color-text;
}

.btn-primary {
background: $color-primary;
padding: $spacing-unit * 1.5;
}

Nesting: bruk med måte for mer lesbar CSS

Sass lar deg skrive nestede selektorer, som gir en mer hierarkisk struktur. Dette kan være veldig ryddig, men også skape ekstremt lange selektorer hvis du overdriver.

Eksempel på fornuftig nesting:

.card {
padding: 1.5rem;
background: white;
border-radius: 0.5rem;
> h3 {
margin-bottom: 0.5rem;
}
> p {
font-size: 0.95rem;
}
}

En enkel tommelfingerregel er å holde nesting maks 2 til 3 nivåer dypt. Hvis du merker at du må inn i 4. nivå, er det ofte et tegn på at HTML-strukturen eller klassene kan forenkles.

Partials: del opp CSS i forståelige biter

Et stort stilark i én fil blir fort uoversiktlig. Med Sass kan du dele opp koden i flere små filer, såkalte partials, og så importere dem inn i én hovedfil.

En vanlig mappestruktur kan for eksempel se slik ut:

• _variables.scss
• _base.scss
• _layout.scss
• _components.scss
• main.scss

Filer som starter med understrek blir ikke kompilert direkte til CSS. I stedet importerer du dem i main.scss:

@use 'variables';
@use 'base';
@use 'layout';
@use 'components';

Resultatet er at du sitter igjen med én main.css som brukes i HTML, men koden din er fordelt på mange små, mer håndterbare filer.

Mixins: gjenbruk av mønstre uten å kopiere og lime

Mixins fungerer litt som små byggeklosser du kan gjenbruke flere steder. I stedet for å kopiere samme sett med deklarasjoner, definerer du en mixin én gang, og inkluderer den der du trenger den.

Enkel mixin for knappestil:

@mixin button-base {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 0.6rem 1.2rem;
font-weight: 500;
}

.btn-primary {
@include button-base;
background: $color-primary;
color: white;
}

Du kan også lage mixins med parametere, for eksempel for å generere ulike varianter av samme komponent uten å miste oversikten over hva som er felles.

Enkel struktur for et nytt prosjekt

Hvis du skal starte et nytt prosjekt med Sass, er det lurt å være enkel og bevisst. Du trenger ikke et stort rammeverk eller kompliserte konvensjoner for å få utbytte.

Et nøkternt oppsett kan være:

• _variables.scssfor farger, typografi, mellomrom og breakpoints
• _base.scssfor body, overskrifter, lenker og generelle resets
• _layout.scssfor grid, containere, toppmeny og footer
• _components.scssfor kort, knapper, skjemaelementer og varslingsbokser
• main.scsssom samler alt og kompileres til main.css

Start enkelt, og legg kun til flere filer når du faktisk har et behov. Målet er struktur og oversikt, ikke flest mulig mapper.

Bygg og kompiler: slik får du ut CSS-filen

For at Sass skal bli til CSS, må du kjøre en kompilering. Nøyaktig oppsett avhenger av verktøyene du bruker, for eksempel pakkere eller rammeverk. Uansett prinsipp: du peker på main.scss og får ut en main.css som legges inn i HTML med vanlig <link>.

Hvis du jobber lokalt, kan du også sette opp en “watch”-kommando som automatisk bygger CSS på nytt når du lagrer en SCSS-fil. Det sparer mye tid i hverdagen.

Vanlige feil og hvordan du unngår dem

Det er noen gjengangere som ofte skaper trøbbel når man tar i bruk Sass. Å være klar over dem tidlig gjør overgangsperioden mye enklere.

• For dyp nesting:Hold deg til korte stier, og bruk heller tydelige klassenavn.
• For mange globale variabler:Samle variabler i ett sted, og rydd opp når designet endrer seg.
• Blande ansvar:Unngå at samme SCSS-fil både definerer layout og detaljer for små komponenter.
• Ingen dokumentasjon:Legg inn korte kommentarer som forklarer hvorfor ting er gjort, ikke bare hva de gjør.

Når lønner det seg å bruke Sass?

For helt små og enkle landingssider kan ren CSS være mer enn nok. Men så snart du har flere gjentagende komponenter, flere utviklere involvert eller et design som kommer til å utvikle seg over tid, blir Sass fort en god investering.

Poenget er ikke å bruke mest mulig avanserte Sass-funksjoner, men å få en stilkode som er enkel å lese, enkel å endre og gir minst mulig friksjon i det daglige arbeidet.