Question

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

在 shade 和 tint 上，我的IDE（webstorm）中出现未知函数错误
，编译器将引发以下错误：./src/styles.scss中的 ERROR（./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css -loader.js！./ node_modules / postcss-loader / src ??嵌入！./ 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（）混合。

SassError：未定义的混入

1 个答案: