Lego2012/Astro: Define CSS Variables.md

Last active January 28, 2024 15:42

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/Lego2012/1cddd780aa20e6e4141b4f1d0f72e556.js"></script>
Save Lego2012/1cddd780aa20e6e4141b4f1d0f72e556 to your computer and use it in GitHub Desktop.

Raw

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>