CSS Academy · leksjon

Hva PostCSS gjør, og hvordan det fungerer

Forstå PostCSS som et verktøy for CSS-transformasjon, drevet av JavaScript-pluginer.

Leksjon 1 av 413 trinn

Hva PostCSS gjør, og hvordan det fungerer er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva er PostCSS?

PostCSS er et verktøy for CSS-transformasjon – ikke en språkutvidelse som Sass, men en JavaScript-drevet prosessor som transformerer standard-CSS gjennom plugins. Plugin-arkitekturen gjør det svært enkelt å sette sammen ulike funksjoner.

PostCSS kontra Sass

Sass er en preprosessor med egne språkfunksjoner. PostCSS er en transformasjonspipeline som opererer på standard-CSS. De kan brukes sammen: Sass kompileres først, og deretter bruker PostCSS ytterligere transformasjoner.

Slik fungerer PostCSS

PostCSS parser CSS til et AST (Abstract Syntax Tree), plugins transformer AST-et, og PostCSS serialiserer det tilbake til CSS. Plugins kan legge til, fjerne eller endre enhver CSS-node.

Installere PostCSS

PostCSS brukes vanligvis via Vite, webpack eller postcss CLI:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

Den standardiserte konfigurasjonsfilen for PostCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS som et trinn i byggpipelinen

I Vite er PostCSS innebygd. Legg til konfigurasjon i vite.config.js eller postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

PostCSS-nodetyper

PostCSS sitt AST har fire hovedtyper noder:

Root: hele CSS-filen
Rule: en selektor og en deklarasjonsblokk
Declaration: et par med egenskap og verdi
AtRule: @-regler (@media, @keyframes osv.)

Populære PostCSS-plugins

PostCSS-økosystemet omfatter hundrevis av plugins:

autoprefixer: legger til leverandørprefikser
cssnano: minimerer CSS
postcss-preset-env: konverterer moderne CSS til CSS som er kompatibel med nettlesere
postcss-import: bygger inn @import-setninger
purgecss: fjerner ubrukt CSS

Kildekart

PostCSS kan generere kildekart som kobler minimert output tilbake til den opprinnelige CSS-en, slik at feilsøking i nettleserens DevTools blir enklere.

PostCSS kontra CSS-in-JS

PostCSS transformer statiske CSS-filer. CSS-in-JS genererer CSS dynamisk i JavaScript under kjøring. Dette er ulike verktøy for ulike bruksområder – PostCSS passer bedre for tradisjonelle stilark, mens CSS-in-JS passer for dynamiske stiler avgrenset til komponenter.

Kjøre PostCSS via CLI

Behandle en fil med CLI:

npx postcss input.css -o output.css --use autoprefixer cssnano

Kort sjekk

Hva bruker PostCSS til å representere CSS under transformasjon?

Besvar den i den interaktive leksjonen

Oppsummering

PostCSS er et verktøy for CSS-transformasjon som behandler CSS gjennom en plugin-pipeline. Det parser CSS til et AST, plugins transformer det, og deretter serialiseres det tilbake til CSS. Bruk det til å legge til leverandørprefikser, minimere CSS, lage polyfyll for moderne CSS og utføre egendefinerte transformasjoner. Det integreres innebygd med byggverktøyene Vite og webpack.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hva PostCSS gjør, og hvordan det fungerer» gratis?

Ja – hele teksten i «Hva PostCSS gjør, og hvordan det fungerer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Hva PostCSS gjør, og hvordan det fungerer»?

Forstå PostCSS som et verktøy for CSS-transformasjon, drevet av JavaScript-pluginer. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Hva PostCSS gjør, og hvordan det fungerer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Hva PostCSS gjør, og hvordan det fungerer
Autoprefixer og cssnano
Egendefinerte PostCSS-pluginer
PostCSS i Vite og Webpack

← Tilbake til CSS Academy