SassError：未定义的混合

Question

我正在尝试使用来自this codepen 的 btn-9 的 scss 将此类悬停动画添加到我的 Angular 项目中。但是，当我为 btn-9 类复制整个 SCSS 时，出现以下错误：

• 在 shade 和 tint 我的 IDE (webstorm) 中出现未知函数错误
• 并且编译器抛出以下错误：ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css -loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss) 模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：未定义的混合。 ╷ 第5214章 │ @include absolute(0,null,null,0);

这是我复制到我的 styles.scss 的代码：

 .check-visa-status {
  $btn-color: #FDC400;
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color, 60%);

  &:before,
  &:after,
  span:before,
  span:after {
    content: '';
    @include absolute(0,null,null,0);
    @include size(100%, 0);
    background-color: rgba($btn-color-dark, 0.25);
    transition: 0.4s ease-in-out;
  }

  &:after,
  span:before {
    top: auto;
    bottom: 0;
  }

  span:before,
  span:after {
    transition-delay: 0.4s;
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before,
    &:after,
    span:before,
    span:after {
      height: $btn-height;
    }
  }

  &:active {
    background-color: $btn-color;
  }
}

我还在按钮中添加了 check-visa-status 类

Answer 1

因为您需要该 CodePen 上不存在的 absolute() mixin。