Interpolation d'une variables CSS avec Svelte

Le problème exposé dans ce sujet a été résolu.

Salut !

Je cherche à faire quelque chose avec Svelte, et je pense qu’un morceau de code vaut mieux qu’une longue explication :

/** app.css */

:root {
    --color-yellow-light: hsl(41, 50%, 80%);
    --color-yellow-regular: hsl(41, 42%, 60%);
}

<!-- Button.svelte -->
<script>
    export let baseColor;
    export let hoverColor;
</script>

<button 
    style:--base-color={baseColor}
    style:--hover-color={hoverColor}
>
    <slot>foo</slot>
</button>

<style>
    @import 'app.css';

    button {
        padding: 1rem;
        border: 0.2rem solid var(var(--base-color));
        border-radius: 0.5rem;
        background-color: var(var(--base-color));
        color: #FFF;
        font-weight: bold;
        cursor: pointer;
    }

    button:hover {
        background-color: var(var(--base-color));
    }
</style>

L’idée, ensuite est de pouvoir écrire :

<script>
  import Button from './Button.svelte';
</script>

<Button baseColor="--color-yellow-regular" hoverColor="--color-yellow-light"></Button>

Mais, à l’évidence, la syntaxe var(var(...)) ne fonctionne pas… Avez-vous une idée sur comment procéder dans ce cas ?

Merci d’avance !

+0 -0

Salut,

CSS ne sait pas interpoler des noms de variables.

Par contre JS oui !

Essaie donc quelque chose du genre (modulo la syntaxe Svelte que je ne connais pas puisque non standard).

<button 
    style:--base-color=var({baseColor})
    style:--hover-color=var({hoverColor})
>
    <slot>foo</slot>
</button>

Et tu peux donc alléger ton CSS :

button {
    background-color: var(--base-color);
}
+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte