Customize with Sass

CDN CSS is perfect for learning; production brands usually compile Pico from Sass so tokens, modules, and classless mode live in version control—not scattered overrides.

Import and settings

@use "pico" with (
  $theme-color: "purple",
  $enable-classes: true,
  $enable-semantic-container: false
);

Disable modules you do not need—forms/search, dropdown, modal—to shave roughly half the bundle on marketing pages that only use typography and buttons.

Custom themes

Exclude "themes/default" from $modules, import your own theme partial, and keep Pico updates separate from brand SCSS—same discipline as Bootstrap Sass customization, with far fewer variables to learn.

Important interview questions and answers

1. Q: Why compile instead of overriding CDN CSS?
   A: You ship only the modules you need, set tokens once at build time, and avoid fighting upstream specificity on every deploy.
2. Q: How do you generate classless from Sass?
   A: $enable-classes: false and $enable-semantic-container: true in the @use "pico" with (...) block.

Self-check

1. Which Sass flag picks the primary accent color family?
2. Name one module you might disable on a read-only docs site.