use scss mixins in styles

[naive jetty]

how can I use a mixin defined in a scss file in a component style?

[hidden garnet]

Hi @naive jetty. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use a mixin defined in a SCSS file in an Astro component style, you can import the SCSS file in the style block of your Astro component. Here's an example:

<style lang="scss">
  @import '../styles/mixins.scss';
  .your-class {
    @include your-mixin;
  }
</style>

In this example, mixins.scss is the SCSS file where your mixin is defined, and your-mixin is the name of the mixin you want to use. The @import statement imports the SCSS file, and the @include statement includes the mixin.

Please note that you need to have the sass package installed in your project to use SCSS in Astro. You can install it using npm:

npm install sass

Also, remember that Astro treats imports in style tags as external. If you encounter any issues, consider moving your styles to a separate file and importing the sass instead[^1^][^5^].

[^1^]: (Source: https://github.com/withastro/astro/issues/7240)
[^5^]: (Source: https://docs.astro.build/en/guides/styling#css-preprocessors)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: