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