Scss Button Mixin - sass

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">
Create New Content
Download CSV
</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;
}