css - 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，我在控制台中得到的错误是这样的:

"no mixin named transition\n\nBacktrace:\n\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，并且您将所有 mixins 放在一个名为 _mixins.scss 的部分中，并首先导入 mixin 部分，它应该可用于导入到应用程序的所有其他内容.scss。

_mixins.scss

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

应用.scss

@import 'mixins';

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

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

但是，如果您没有使用部分系统，而是将多个 scss 文件编译为 css，那么您必须在要使用 mixin 的任何地方导入包含 mixin 定义的文件。