Bonjour, en fait ce que je cherche à faire est assez bizarre mais en gros ça serait ça :

.element1 {
    $var: 10px;
    animation: anim($var) 5s;
}
.element2 {
    $var: 20px;
    animation: anim($var) 5s;
}

J'aimerais que l'animation "anim" soit modifiée dynamiquement pour intégrer la valeur de var. Est-il possible de faire ça avec Sass ? C'est pour éviter de créer une animation par élément.

Je suis pas sur de comprendre ta question 

$var = 10px;
.element1 {
    animation: anim($var) 5s;
}

$var = 20px;
.element2 {
    animation: anim($var) 5s;
}

En fait j'aimerais que l'animation "anim" soit comme ça, c'est à dire pouvoir mettre une variable dedans :

@keyframes anim($var) {
    0% {width: $var}
    100% {width: $var / 2}
}

Mais ça ne fonctionne pas...

Tu peux probablement utiliser les variables CSS (pas SCSS) ici : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables .

Edit : petit exemple rapide https://codepen.io/lamecarlate/pen/PKprMZ

Je propose les variables CSS parce que comme ça on n'a vraiment qu'une seule animation. En SCSS tu ferais par exemple un mixin qui générerait deux animations différentes - et dans le CSS on aurait deux animations déclarées.

-
Edité par Lamecarlate 8 août 2017 à 22:26:59

Même avec une fonction il pourrais pas faire ça?

HadockB > si si, on pourrait tout à fait. Je n'ai pas dit qu'on ne pouvait pas Je donne simplement une autre proposition.

Je voulais juste vérifié que j'avais bien compris le truc  (d’ailleurs dans tout ça, entre less et sass ya pas grande différence j'ai l'impression si?)

LESS et Sass sont deux préprocesseurs de CSS : dans les faits, les deux produisent du CSS, et il y a en effet peu de différences fonctionnelles (les mixins et les boucles s'écrivent autrement, et les variables sont préfixées par @ ou par $ suivant les cas, mais sinon…). Par contre je ne vois pas ce que LESS vient faire ici

C'était purement une question qui me trottait dans l'esprit