Primera parte del código Sass que no se está compilando - css, sass

Tengo un código Sass que solo está compilando unpequeña parte de ella. El resto se compilará a la nada! No puedo averiguar qué está pasando y por qué no se compilará. Por favor vea mis comentarios para ver lo que hace y no compila:

//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;}
}

¿Alguna idea de dónde me he equivocado aquí?

EDITAR

Aquí está el archivo donde se debe compilar:

.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;

}
}
}

Estoy usando el paquete web y el error que obtengo en la consola es el siguiente:

"ninguna mezcla llamada transitionnnBacktrace: ntsrc / css / app-containers.scss: 4 ",

Respuestas

3 para la respuesta № 1

Las definiciones de mezcla no se compilan en el CSS final, solo se mostrarán cuando las incluyas en una definición. Por ejemplo, si lo haces.

body{
@include transition(foo);
}

Aparecería en tu CSS final como:

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

Editar después de la aclaración de la pregunta en los comentarios.

Parece que es un problema de importación. Las importaciones en Sass no son enlaces como lo son en CSS, literalmente tiran del código scss importado y lo compilan en un solo archivo. Entonces, si tiene un solo archivo, app.scss, por ejemplo, y si coloca todos sus mixins en un parcial llamado _mixins.scss, e importe primero el mixin parcial, debería estar disponible para todo lo demás que se está importando a la aplicación. .scss.

_mixins.scss

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

app.scss

@import "mixins";

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

Con esta configuración todo lo que escribes después de laImportar en app.scss, incluyendo otras importaciones de Sass, debe tener acceso a todo en el _mixins parcial. Todo se compilará en un solo app.css (suponiendo que no cambie el nombre en el momento de la compilación).

Sin embargo, si no está utilizando el sistema parcial pero está compilando varios archivos scss a css, entonces tendrá que importar el archivo con las definiciones de mezcla en todos los lugares donde quiera usar la mezcla.

---