I'm currently diving into mixin's with SCSS, attempting to create a basic mixin for styling buttons. However, I seem to be encountering some issues.
It's likely that I've overlooked something obvious, but I'm feeling quite frustrated at the moment.
Any suggestions or guidance would be greatly appreciated.
Here's the link to observe - my mixin doesn't appear to be working as intended.
In the HTML code:
<div class="button-collection">
<button type="button"
class="button-collection__button button-collection__button--is-blue">
Button One
</button>
<button type="button"
class="button-collection__button button-collection__button--is-pink">
Button Two
</button>
@mixin button($primary) {
background-color: $primary;
}
.button-collection__button {
display: block;
width: 400px;
height: 40px;
margin: 10px auto;
&.--is-blue {
@include button(#449dc7);
height: 400px;
}
}