SassError: Undefined mixin

Question

I am trying to use the scss for btn-9 from this codepen to add such hover animation to my Angular project. However, when I copy the whole SCSS for the class btn-9, I get the following erros:

• on shade and tint I get Unknown function error in my IDE (webstorm)
• and the compiler throws the following error: 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) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin. ╷ 5214 │ @include absolute(0,null,null,0);

Here's scss the code that I copied to my 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;
  }
}

I also added the check-visa-status class to my button

Answer 1

Because you need the absolute() mixin that doesn't exist on that CodePen.