CSS Academy · Lektion

Hvad PostCSS gør, og hvordan det fungerer

Forstå PostCSS som et værktøj til CSS-transformationer, der drives af JavaScript-plugins.

Lektion 1 af 413 trin

Hvad PostCSS gør, og hvordan det fungerer er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad er PostCSS?

PostCSS er et CSS-transformeringsværktøj – ikke en sprogudvidelse som Sass, men en JavaScript-drevet processor, der transformer standard-CSS gennem plugins. Pluginarkitekturen gør det nemt at sammensætte funktionaliteten.

PostCSS sammenlignet med Sass

Sass er en præprocessor med sine egne sprogfunktioner. PostCSS er en transformationskæde, der arbejder på standard-CSS. De kan bruges sammen: Sass kompileres først, hvorefter PostCSS anvender yderligere transformationer.

Sådan fungerer PostCSS

PostCSS fortolker CSS til et AST (abstrakt syntakstræ), plugins transformerer AST'et, og PostCSS serialiserer det tilbage til CSS. Plugins kan tilføje, fjerne eller ændre alle CSS-elementer.

Installation af PostCSS

PostCSS bruges oftest via Vite, webpack eller postcss-CLI'en:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

Den almindelige konfigurationsfil til PostCSS:

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

PostCSS som trin i byggeprocessen

I Vite er PostCSS indbygget. Tilføj konfiguration til vite.config.js eller postcss.config.js:

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

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

Nodetyper i PostCSS

PostCSS' AST har fire hovedtyper af elementer:

Root: hele CSS-filen
Rule: en vælger og en deklarationsblok
Declaration: et par af egenskab og værdi
AtRule: @-regler (@media, @keyframes osv.)

Populære PostCSS-plugins

PostCSS-økosystemet omfatter hundredvis af plugins:

autoprefixer: tilføjer leverandørpræfikser
cssnano: minificerer CSS
postcss-preset-env: konverterer moderne CSS til CSS, der er kompatibel med browsere
postcss-import: indsætter @import-udsagn direkte
purgecss: fjerner ubrugt CSS

Source maps

PostCSS kan generere source maps, der knytter det minificerede resultat tilbage til den oprindelige CSS, så fejlfinding i browserens DevTools bliver nemmere.

PostCSS sammenlignet med CSS-in-JS

PostCSS transformerer statiske CSS-filer. CSS-in-JS genererer CSS dynamisk i JavaScript under kørsel. Det er forskellige værktøjer til forskellige formål – PostCSS er bedre til traditionelle stilark, mens CSS-in-JS er bedre til dynamiske stilarter, der er afgrænset til komponenter.

Kørsel af PostCSS via CLI

Behandl en fil med CLI'en:

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

Hurtigt tjek

Hvad bruger PostCSS til at repræsentere CSS under transformation?

Besvar den i den interaktive lektion

Opsummering

PostCSS er et CSS-transformeringsværktøj, der behandler CSS gennem en pluginbaseret kæde. Det fortolker CSS til et AST, plugins transformer det, og det serialiserer resultatet tilbage til CSS. Brug det til automatisk tilføjelse af præfikser, minificering, polyfills til moderne CSS og brugerdefinerede transformationer. Det integreres naturligt med byggeværktøjerne Vite og webpack.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Hvad PostCSS gør, og hvordan det fungerer” gratis?

Ja — hele teksten til “Hvad PostCSS gør, og hvordan det fungerer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Hvad PostCSS gør, og hvordan det fungerer”?

Forstå PostCSS som et værktøj til CSS-transformationer, der drives af JavaScript-plugins. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Hvad PostCSS gør, og hvordan det fungerer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Hvad PostCSS gør, og hvordan det fungerer
Autoprefixer og cssnano
Brugerdefinerede PostCSS-plugins
PostCSS i Vite og Webpack

← Tilbage til CSS Academy