Scss Button Mixin

Question

I've been trying to troubleshoot this for hours but I just don't understand what I'm doing wrong. Maybe it's not me and it's a glitch in codekit? I have built a scss button mixin.

@mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false) {
        display: inline-block;
        width: auto;
        border: 0;
        border-radius: 4px;
        text-align: center;
        box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 1px 2px rgba(102,190,255,.75);
        color: $textcolor;
        text-decoration: none;
        @include font(normal);
        @include transition(box-shadow 150ms ease);

        &:hover{            
            box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
        }
        &:active{
            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset
        }

        // Background
        @if ($background == 'blue') {

            /* @include gradient(#1673b9, #125e97); */
            background: blue;

        } @else if ($background == 'grey') {

            /* @include gradient($grey-light, $grey-dark); */
            background: grey;
        }

        // Sizes
        @if $size == small {

        }

        @if $size == medium {
            height: 32px;
            line-height: 32px;
            padding: 0 18px;
            font-size: 14px;
        }

        @if $size == large {

        }

        @if $fullWidth == true {
            width: 100%;
            display: block;
        }

    }

The sizes and full-size conditionals work just fine. But the Background does not. It just doesn't do anything. For now the Scss that uses it is:

<div id="main-header">
        <a href="#" class="btn create">Create New Content</a>
        <a href="#" class="btn download">Download CSV</a>
</div>

.btn{
        &.create{
            @include btn(blue);
        }
        &.download{
            @include btn(grey);
        }
    }

With that, I should be seeing two different color buttons. The markup and Scss will be improved but this is what it is for testing purposes. It seems to work fine here: http://sassmeister.com/gist/da3707a3e03609f8991c

Any help or suggestions will be greatly appreciated. Thanks!

Oh, as I looked over this question, I noticed I pasted the mixin that has @if ($background == 'blue'){ I have tried that without single quotes and without parentheses.

Answer 1

The condition should be

if($background == blue)

Also you have 2 other mixins inside which you should resolve or remove

@include font(normal);
@include transition(box-shadow 150ms ease);

Here's the whole SCSS file:

$white:white;

@mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false)
{
    &:hover
    {
        box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
    }
    &:active
    {
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
    }
    // Background
     @if ($background == blue)
    {
        background: blue;
    }
    @else if ($background == 'grey')
    {
        background: grey;
    }
    // Sizes
     @if $size == small
    {
    }
    @if $size == medium
    {
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        padding: 0 18px;
    }
    @if $size == large
    {
    }
    @if $fullWidth == true
    {
        display: block;
        width: 100%;
    }
}
.btn
{
    &.create
    {
    }
    &.download
    {
    }
}

and its generated CSS:

.btn.create
{
    background: blue;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
    color: white;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.btn.create:hover
{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.create:active
{
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}
.btn.download
{
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(102, 190, 255, 0.75);
    color: white;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    width: auto;
}
.btn.download:hover
{
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.03), inset 0 -1px 2px rgba(102, 190, 255, 0.75), inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.download:active
{
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, 0.5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset;
}