CSSPreprocessor + Foundation Motion UI

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Bonjour,

Quelqu'un a-t-il réussi à faire fonctionner Foundation Motion UI avec CSSPreprocessor ?
Le CSS généré pour Foundation est bon, mais il est incomplet pour ce qui concerne Motion UI.

Toutes mes dépendances SCSS se chargent correctement avec les instructions suivantes :
@import 'settings';
@import 'foundation';
@include foundation-everything(true);
@import 'motion-ui';


Exemple pour une transition:
Code :
[== CSS ==]
#logo { @include mui-fade (in, $ duration: 4s); }

Le CSS obtenu est :
Code :
[== CSS ==]
.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } .mui-enter.mui-enter-active { opacity: 1; }

Il manque le sélecteur ID. Le CSS devrait être :
Code :
[== CSS ==]
#logo.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } #logo.mui-enter.mui-enter-active { opacity: 1; }

Exemple pour une animation :
Code :
[== CSS ==]
h1 { @include mui-animation(fade(0, 1)); animation-duration: 4s; }

Le CSS obtenu est :
Code :
[== CSS ==]
h1 { animation-name: fade-0-to-100; animation-duration: 4s; }
@keyframes fade-0-to-100 { { opacity: 0; } { opacity: 1; } }

Il manque le poucentage pour des 1ere et 2eme keyframes. Le CSS devrait être :
Code :
[== CSS ==]
@keyframes fade-0-to-100 { 0% { opacity: 0; } 100% { opacity: 1; } }

Si quelqu'un a une piste, je prends.
Merci.
#1
Bonjour,

Quelqu'un a-t-il réussi à faire fonctionner Foundation Motion UI avec CSSPreprocessor ?
Le CSS généré pour Foundation est bon, mais il est incomplet pour ce qui concerne Motion UI.

Toutes mes dépendances SCSS se chargent correctement avec les instructions suivantes :
@import 'settings';
@import 'foundation';
@include foundation-everything(true);
@import 'motion-ui';


Exemple pour une transition:
Code :
[== CSS ==]
#logo { @include mui-fade (in, $ duration: 4s); }

Le CSS obtenu est :
Code :
[== CSS ==]
.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } .mui-enter.mui-enter-active { opacity: 1; }

Il manque le sélecteur ID. Le CSS devrait être :
Code :
[== CSS ==]
#logo.mui-enter { transition-duration: 500ms; transition-timing-function: linear; transition-duration: 4s; opacity: 0; transition-property: opacity; } #logo.mui-enter.mui-enter-active { opacity: 1; }

Exemple pour une animation :
Code :
[== CSS ==]
h1 { @include mui-animation(fade(0, 1)); animation-duration: 4s; }

Le CSS obtenu est :
Code :
[== CSS ==]
h1 { animation-name: fade-0-to-100; animation-duration: 4s; }
@keyframes fade-0-to-100 { { opacity: 0; } { opacity: 1; } }

Il manque le poucentage pour des 1ere et 2eme keyframes. Le CSS devrait être :
Code :
[== CSS ==]
@keyframes fade-0-to-100 { 0% { opacity: 0; } 100% { opacity: 1; } }

Si quelqu'un a une piste, je prends.
Merci.
#2
Hello,

regarde s'il y a une variation entre la version Sass CLI et Sass PHP - il m'est déjà arrivé d'avoir des petites surprises entre les deux Wink
#2
Hello,

regarde s'il y a une variation entre la version Sass CLI et Sass PHP - il m'est déjà arrivé d'avoir des petites surprises entre les deux Wink
#3
Merci pour la piste.
Là, je suis sur un hébergement OVH mutualisé, je ne peux utiliser que ScssPHP le PHP / SASS pre-processor de Leaf.
Je suis bloqué sur ce point.
#3
Merci pour la piste.
Là, je suis sur un hébergement OVH mutualisé, je ne peux utiliser que ScssPHP le PHP / SASS pre-processor de Leaf.
Je suis bloqué sur ce point.


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)