CSSPreprocessor + Foundation Motion UI

CSSPreprocessor + Foundation Motion UI - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : CSSPreprocessor + Foundation Motion UI (/thread-4034.html)

CSSPreprocessor + Foundation Motion UI - cyrcle - 20/06/2017

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.

CSSPreprocessor + Foundation Motion UI - airelibre - 21/06/2017

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

CSSPreprocessor + Foundation Motion UI - cyrcle - 21/06/2017

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.