Sass 代码的第一部分未编译

Question

我有一些 Sass 代码，它只编译了其中的一小部分。其余的将编译为一无所有！我无法弄清楚发生了什么以及为什么它无法编译。请查看我的评论，看看它能编译什么，不编译什么：

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

知道我哪里出错了吗？

编辑

这是它应该编译的文件：

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

我正在使用 webpack，我在控制台中遇到的错误是这样的：

"没有混合命名 transition\Backtrace：\tsrc/css/app-containers.scss：4"，

Answer 1

Mixin 定义不会编译成最终的 CSS，它们只会在定义中@include它们时才会显示。例如：如果你这样做

body{
@include transition(foo);
}

它将在您的最终 CSS 中显示为：

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

在评论中澄清问题后进行编辑

看起来这是一个导入问题。Sass 中的导入不像 CSS 中的链接，它们实际上是将导入的 scss 代码拉入并将其编译为一个文件。因此，如果你有一个文件，例如app.scss，并且你把所有的mixin放在一个名为_mixins.scss的部分，并首先导入mixin部分，它应该可用于导入到app.scss的其他所有内容。

_mixins.scss

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

app.scss

@import 'mixins';
.foo{
@include my-rad-mixin;
}

通过此设置，您在 app.scss 中导入后编写的所有内容(包括其他 Sass 导入)都应该可以访问_mixins部分中的所有内容。它将全部编译为单个应用程序.css(假设您在编译时不更改名称。

但是，如果您没有使用部分系统，而是将多个 scss 文件编译为 css，那么您必须将带有 mixin 定义的文件导入到您想要使用 mixin 的任何位置。