Here is the screenshot of my website structure.
In my mixins file, I have created all the necessary sass mixins.
I have created this mixin for border radius:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
Now when I try to use this for my button class in _button.scss in modules folder , I get undefined variable error. Whereas when I use the same mixin in the _button.scss file itself, I don't get any error.
in my _button.scss file i have included the mixin as under
button{
background-color: $theme-color;
border: 0px solid;
padding: 0.7rem 3rem;
@include border-radius(2rem);
}
What is the issue exactly. I want to keep all my mixins in a seperate file to keep the structure neat.
you have to include the mixin with @include or @import