Skip to content

Instantly share code, notes, and snippets.

@Lego2012

Lego2012/Astro: Define CSS Variables.md

Last active January 28, 2024 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Lego2012/1cddd780aa20e6e4141b4f1d0f72e556 to your computer and use it in GitHub Desktop.
Save Lego2012/1cddd780aa20e6e4141b4f1d0f72e556 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Astro: Define CSS Variables.md

Method to quickly define variables:

---
const foregroundColor = "hsl(20, 50%, 50%)";
const backgroundColor = "hsl(200, 50%, 50%)";
---

<style define:vars={{ foregroundColor, backgroundColor }}>
    p {
        background-color: var(--backgroundColor);
        color: var(--foregroundColor);
    }
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment