CODEWITHSUNDEEP
csssassscss-mixins
Harry Blue
Harry Blue

Reputation: 4502

SCSS Mixing not working

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;
    }
}

Upvotes: 0

Views: 497

Answers (1)

m.cekiera
m.cekiera

Reputation: 5395

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.

Upvotes: 1

Related Questions