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，我在控制台中遇到的错误是：

“没有mixin命名过渡\ n \ nBacktrace：\ n \ TSRC / CSS / APP-containers.scss：4" ，

Sass代码的第一部分没有编译

0 个答案: