Pierwsza część kodu Sass nie kompiluje się - css, sass

Mam trochę kodu Sass, który kompiluje tylkomała jego część. Reszta to nic nie da! Nie mogę zrozumieć, co się dzieje i dlaczego nie udało się go skompilować. Proszę zobaczyć moje komentarze, aby zobaczyć, co robi i nie kompiluje:

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

Jakiś pomysł, w którym tu się nie myliłem?

EDYTOWAĆ

Oto plik, w którym ma się skompilować:

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

}
}
}

Używam webpacka i błąd, który dostaję na konsolę:

"nie wymieniono nazwy mixin transitionnnBacktrace: ntsrc / css / app-containers.scss: 4 ",

Odpowiedzi:

3 dla odpowiedzi № 1

Definicje Mixin nie są kompilowane do ostatecznego CSS, pojawią się tylko wtedy, gdy je @ włączysz w definicję.

body{
@include transition(foo);
}

pojawi się w twoim ostatecznym CSS jako:

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

Edytuj po wyjaśnieniu pytania w komentarzach

Wygląda na to, że jest to problem z importem. Import w Sassie nie jest połączeniem takim, jak w CSS, dosłownie pobiera zaimportowany kod scss i kompiluje go do jednego pliku. Jeśli masz na przykład pojedynczy plik, na przykład app.scss, a wszystkie twoje miksy w części nazywają się _mixins.scss i najpierw importuj częściowe części, to powinny być dostępne dla wszystkich pozostałych importowanych do aplikacji .scss.

_mixins.scss

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

app.scss

@import "mixins";

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

Dzięki tej konfiguracji wszystko, co napiszesz poimport w pliku app.scss, w tym inny import Sass, powinien mieć dostęp do wszystkiego w części _mixins. Wszystko zostanie skompilowane do pojedynczej app.css (zakładając, że nie zmienisz nazwy podczas kompilacji).

Jeśli jednak nie używasz systemu częściowego, ale kompilujesz wiele plików scss do css, to musisz zaimportować plik z definicjami mixin wszędzie tam, gdzie chcesz użyć mixina.

---