SassError：未定义的混合

Posted 2023-03-07

【中文标题】SassError：未定义的混合

【英文标题】：SassError: Undefined mixin

【发布时间】：2020-09-25 00:01:09

【问题描述】：

我正在尝试使用来自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）： 。 ╷ 第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 类

【问题讨论】：

你试过这个solution吗？

您正在使用这行代码 @include absolute(0,null,null,0); 调用 mixin，但您尚未定义。尝试将该行更改为 position: absolute;

【参考方案1】：

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