Sass mixins

Vi bruker Sass for å lage CSSen i Jøkul, og har etter hvert fått et større bibliotek med mixins og funksjoner.

Prinsipper

Mange av disse hjelperne er generiske nok til å være nyttige også i egne applikasjoner. Hvis prosjektet ditt bruker Sass er det lurt å ta en nærmere titt på hva Jøkul har å tilby.

Vi har for øvrig en guide for Hvordan skrive Sass i Jøkul som kan være en inspirasjon til hvordan dere skriver Sass i egne prosjekter.

Hvilke mixins finnes?

For en fullstendig oversikt er det best å se på kildekoden.

Et utvalg av de mest brukte internt i Jøkul:

Funksjonen rem() hjelper med å oversette et design i pixler til rem.
Mixinene small-screen og from-medium-screen er nyttige for responsiv design.
Det samme er screen-from(), screen-to(), og screen-between().
Mixen motion() hjelper deg med å få animert ting med samme easing og timing som Jøkul.
light-mode-variables og dark-mode-variables hjelper med å støtte begge temaene.

Hvordan bruker jeg dem?

Alle hjelperne finnes i jkl-modulen i @fremtind/jkl-core.

Om du har en editor med god code completion for Sass får du en oversikt over alt som er tilgjengelig etter å ha skrevet jkl.. Hvis du bruker Visual Studio Code er extensionen Some Sass anbefalt. Med den får du code suggestions for moduler og visning av SassDoc ved hover, blant annet.

@use "@fremtind/jkl-core/jkl";

.min-custom-ting {
    min-width: jkl.rem(280px);

    @include jkl.screen-from(4096px) {
        padding: jkl.$spacing-3xl;
    }
}