svelte-styling

ridiculously simple CSS variables in svelte

Demo: https://leodog896.github.io/svelte-styling

Variables

<script>
  import { variables } from "svelte-styling"
  let size = 1
  let backgroundColor = "white";
</script>
<input type="number" bind:value={size} placeholder="Enter Size">
<p use:variables={{ size }}></p>

<input type="number" bind:value={backgroundCOlor} placeholder="Enter Background Color">
<svelte:body use:variables={{ color: backgroundColor }}>

<style>
  :global(body) {
    --color: white;
    background-color: var(--color);
  }

  p {
    --size: 1; /* default SSR value! */
    font-size: calc(var(--size) * 2rem);
  }
</style>

Styles

<script>
  import { styles } from "svelte-styling"
  let border = "1px black solid"
</script>

<input use:styles={{ border }} bind:value={border} placeholder="Enter Border">