Preprocessor support (SCSS, PostCSS) in Svelte

Introduction

Preprocessors like SCSS and PostCSS help write CSS faster and cleaner. They add features like variables and nesting that normal CSS does not have.

You want to organize styles with variables and reusable parts.

You need to write nested CSS rules to match HTML structure easily.

You want to use modern CSS features that older browsers don't support yet.

You want to automatically add vendor prefixes for better browser support.

You want to keep your stylesheets clean and easier to maintain.

Syntax

Svelte

<style lang="scss">
  $main-color: #3498db;
  .button {
    background-color: $main-color;
    &:hover {
      background-color: darken($main-color, 10%);
    }
  }
</style>

Use lang="scss" attribute in the <style> tag to enable SCSS preprocessing in Svelte.

PostCSS can be configured with plugins in your build setup, often via postcss.config.js.

Examples

This example shows a simple SCSS variable used inside a Svelte component style.

Svelte

<style lang="scss">
  $color: red;
  h1 {
    color: $color;
  }
</style>

Using PostCSS lets you write normal CSS but apply plugins like autoprefixer automatically.

Svelte

<style lang="postcss">
  .box {
    display: flex;
    transition: all 0.3s;
  }
</style>

SCSS nesting lets you write CSS that matches HTML structure clearly.

Svelte

<style lang="scss">
  nav {
    ul {
      list-style: none;
    }
  }
</style>

Sample Program

This Svelte component uses SCSS for styling. The button changes color when clicked, showing how SCSS variables and nesting work together. The class:active directive toggles the active style.

Svelte

<script>
  let active = false;
</script>

<style lang="scss">
  $active-color: #27ae60;
  button {
    background: #eee;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    &:hover {
      background: darken(#eee, 10%);
    }
    &.active {
      background: $active-color;
      color: white;
    }
  }
</style>

<button class:active={active} on:click={() => active = !active} aria-pressed={active}>
  {active ? 'Active' : 'Inactive'}
</button>

Important Notes

Make sure your build tool (like Vite or Rollup) is configured to handle SCSS or PostCSS.

Use semantic HTML and ARIA attributes for accessibility when styling interactive elements.

Preprocessors add power but keep your CSS readable and maintainable.

Summary

Preprocessors let you write better CSS with variables, nesting, and plugins.

In Svelte, add lang="scss" or lang="postcss" to the style tag to enable them.

They help keep styles organized, easier to maintain, and compatible with many browsers.