scss 编译错误 no mixin named transalate 属性

Question

没有混合命名转换编译后我在这里收到这个错误代码

这个错误代码

{
"status": 1,
"file": "/Users/chetandhargalkar/Documents/medino/assets/sass/layout/_header.scss", "line": 36,
"column": 30,
"message": "no mixin named transition",
"formatted": "Error: no mixin named transition\n on line 36 of assets/sass/layout/_header.scss\n from line 11 of assets/sass/main.scss\n>> @include transition(all .3s ease-in-out)\r\n -----------------------------^\n"
}

这是我的代码

.social-links {
  ul {
    float: right;
    margin-top: 5px;
    li {
      display: inline;
      margin-left: 15px;
      a {
        color: $body-text;
        @include transition(all .3s ease-in-out);
        &:hover {
          color: $primary-color;
        }
      }
    }
  }
}

Answer 1

Transition 不是 mixin，它是标准 CSS 属性。替换为：

@include transition(all .3s ease-in-out);

有了这个：

transition: all .3s ease-in-out;

Answer 2

如果你真的想使用 mixin，你可以创建一个你可以在主题中随处使用的 mixin。

@mixin transition($val, $timer, $ease) {
    transition: $val $timer $ease;
}

像这样使用：

a {
  @include transition(all, .3s, ease-in-out);
}

或者只使用常规 css:

a {
  transition: all 300ms ease-in-out;
}

scss 编译错误 no mixin named transalate 属性

scss compile error no mixin named transalate property

html

css

scss-mixins