0

I am trying to learn mixin's with SCSS, I am trying to make a simple mixin to control the style of buttons, however it is not working.

I am sure I have missed something obvious, but I am pulling my hair out now.

Any advice would be much appreciated.

As you can see here - my mixin is not being applied.

html

<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;
    }
}
Harry Blue
  • 4,202
  • 10
  • 39
  • 78
  • 1
    You made a mistake in class name, its should be `&--is-blue` not `&.--is-blue`, without dot. Its not mixin bug, but wrong scss syntax, that all – m.cekiera Apr 29 '18 at 06:30
  • 2
    omg, I can't believe it haha, please can you add this comment as an answer and I can accept it properly. Thank you so much for your time. – Harry Blue Apr 29 '18 at 06:36

1 Answers1

1

You made a mistake in class name, its should be &--is-blue not &.--is-blue, without dot. Its not mixin bug, but wrong scss syntax.

m.cekiera
  • 5,365
  • 5
  • 21
  • 35