Using Sass in Astro

To use Sass in Astro, run npm install -D sass. That’s the only setup. Then write <style lang="scss"> in any component, or import .scss files from frontmatter. Astro uses Vite, which compiles Sass automatically once the package is installed, and scoping works exactly as it does with plain CSS.

Key Takeaways

• Install sass as a dev dependency. No integration or config needed.
• lang="scss" (or lang="sass" for indented syntax) on a style tag; scoping still applies.
• Use @use to share variables and mixins, not the deprecated @import.
• Inject a shared file into every component with Vite’s additionalData.

Install

npm install -D sass

In a component

---
// src/components/Card.astro
---
<article class="card">
  <h3><slot name="title" /></h3>
  <slot />
</article>

<style lang="scss">
  $radius: 0.75rem;

  .card {
    padding: 1.5rem;
    border-radius: $radius;

    h3 { margin-top: 0; }

    &:hover { box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); }
  }
</style>

The compiled CSS is scoped to the component, like any <style> block.

Global stylesheets

Import a .scss file in your base layout:

---
// src/layouts/BaseLayout.astro
import '../styles/global.scss';
---

// src/styles/global.scss
@use 'tokens' as *;

body {
  font-family: $font-body;
  color: $color-text;
}

Sharing variables and mixins

Put tokens in a partial and @use them where needed:

// src/styles/_tokens.scss
$color-text: #14140f;
$color-accent: #2563eb;
$font-body: system-ui, sans-serif;

@mixin bp($min) {
  @media (min-width: $min) { @content; }
}

<style lang="scss">
  @use '../styles/tokens' as *;

  .hero {
    color: $color-accent;
    @include bp(768px) { padding: 4rem; }
  }
</style>

Sass has deprecated @import, and current versions print warnings for it. Use @use and @forward in new code.

Injecting tokens into every component

Writing the @use line in every component gets repetitive. Vite can prepend it:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "/src/styles/tokens" as *;\n`,
        },
      },
    },
  },
});

Now every lang="scss" block can use $color-accent and bp() directly. Keep the injected file to variables and mixins: anything that outputs CSS would be duplicated into every component.

Sass variables vs CSS custom properties

Sass variables are resolved at build time. CSS custom properties are resolved in the browser and can change per element, per theme (dark mode) or from JavaScript. A good split:

• CSS custom properties for design tokens that might change at runtime: colours, themes, spacing scales.
• Sass for build-time conveniences: mixins, loops, maths, breakpoints.

:root { --color-accent: #{$color-accent}; }

That line exposes a Sass value as a custom property, so you get both.

Do you need Sass?

Native CSS now has nesting, custom properties, color-mix() and container queries, all supported in current browsers. A new Astro project can often skip Sass entirely. It’s still worth using if your team already has a Sass codebase or design system, or you rely on mixins and loops.

The styling docs for Komal themes show where a theme keeps its tokens if you want to convert them to Sass. For the other styling options (scoped styles, Tailwind, tokens, fonts) see the Astro styling guide. To pass component props into styles, Sass or not, use define:vars. The Astro styling docs cover Less and Stylus too.

FAQ

Does Astro support SCSS out of the box?

Astro supports it once you install the sass package. No integration or config change is needed.

Can I use Sass with Tailwind CSS in Astro?

You can, but it’s rarely worth it. Tailwind’s own CSS-first config and native CSS nesting cover most of what Sass adds.