La prima parte del codice Sass non si sta compilando - css, sass

Ho un codice Sass che sta compilando solo apiccola parte di esso. Il resto sarà compilato per nulla! Non riesco a capire cosa sta succedendo e perché non si compila. Si prega di vedere i miei commenti per vedere cosa fa e doesn "t compilare:

//wont compile from here down to...

@mixin transition($value) {
transition: $value;
-webkit-transition: $value;
-moz-transition: $value;
-ms-transition: $value;
-o-transition: $value;
}

@mixin transform($value) {
transform: $value;
-webkit-transform: $value;
-moz-transform: $value;
-ms-transform: $value;
-o-transform: $value;
}

@mixin animation($value) {
-webkit-animation: $value;
-moz-animation: $value;
-o-animation: $value;
-ms-animation: $value;
animation: $value;
}

@mixin animation-delay($value) {
-webkit-animation-delay: $value;
-moz-animation-delay: $value;
-o-animation-delay: $value;
-ms-animation-delay: $value;
animation-delay: $value;
}

//Here

//however the below code will compile

@-webkit-keyframes animateMenuItems {
0%   { @include transform(translateX(-60%));opacity:0;}
100% { @include transform(translateX(0%));opacity:1;}
}

Qualche idea su dove ho sbagliato qui?

MODIFICARE

Ecco il file in cui deve essere compilato:

.App {
.app-content-wrap {
background:white;
@include transition(all 0.2s ease-out);
float: left;
width: 100%;
-webkit-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);
-moz-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);
box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);
}
&.sidenavActive {
.app-content-wrap {
transform: translate(300px,50px);
-webkit-transform: translate(300px,50px);
opacity:0.8;

}
}
}

Sto usando il webpack e l'errore che sto ottenendo nella console è questo:

"No mixin named transitionnnBacktrace: ntsrc / css / app-containers.scss: 4" ,

risposte:

3 per risposta № 1

Le definizioni di mixin non vengono compilate nel CSS finale, verranno visualizzate solo quando le includi in una definizione.Eg: se lo fai

body{
@include transition(foo);
}

apparirebbe nel tuo CSS finale come:

body{
transition: foo;
-webkit-transition: foo;
-moz-transition: foo;
-ms-transition: foo;
-o-transition: foo;
}

Modifica dopo il chiarimento della domanda nei commenti

Sembra che sia un problema di importazione. Le importazioni in Sass non sono link come sono in CSS, letteralmente estraggono il codice scss importato e lo compongono in un unico file. Quindi se hai un singolo file, app.scss per esempio, e stai mettendo tutti i tuoi mixin in un partial chiamato _mixins.scss, e importa prima il mixin partial, dovrebbe essere disponibile per tutto il resto che viene importato nell'app .scss.

_mixins.scss

@mixin my-rad-mixin(){
some rad mixin stuff goes here
}

app.scss

@import "mixins";

.foo{
@include my-rad-mixin;
}

Con questa configurazione tutto ciò che scrivi dopo ill'importazione in app.scss, incluse altre importazioni Sass, dovrebbe avere accesso a tutto il partial di _mixins. Verranno tutti compilati in un'unica app.css (supponendo che non si cambi il nome in fase di compilazione).

Se, tuttavia, non si utilizza il sistema parziale ma si compilano più file scss in css, è necessario importare il file con le definizioni mixin ovunque si desideri utilizzare il mixin.

---