Sass 按钮混合

我已经试着解决这个问题好几个小时了，但我不明白我做错了什么。也许不是我，而是代码包中的一个小故障？我制作了一个scss按钮混音器

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

    }

大小和全大小条件很好地工作。但背景并非如此。这根本没用。目前，使用它的SCS是：

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

.btn{
&.创造{
@包括btn（蓝色）；
}
&.下载{
@包括btn（灰色）；
}
}

这样，我应该看到两个不同颜色的按钮。标记和SCS将得到改进，但这就是测试目的。在这里似乎效果不错：

任何帮助或建议都将不胜感激。谢谢

---

哦，当我查看这个问题时，我注意到我粘贴了带有@if（$background=='blue'）{的mixin，我尝试了不带单引号和括号的方法。

条件应该是

if($background == blue)

此外，您还有另外两个mixin，您应该在其中解析或删除它们

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

以下是整个SCSS文件：

$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
    {
    }
}

及其生成的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;
}

---

可悲的是，它仍然不能与这样的条件一起工作。这是我首先尝试的。我开始认为这可能是Codekit的一个小故障。//如果$Background==blue{@include gradient（#1673b9，#125e97）；}如果$Background==grey{include gradient（$grey light，$grey dark）；}哦，是的，我也用括号尝试了你的建议。仍然不走运。你生成css是因为我生成了，并且看到了背景色。用最新的SCS和输出更新了答案你可以使用@include btn（'blue'））；有了“blue”的条件，它仍然可以工作。当我在中测试时：它可以工作。我猜它是codekit。它可能是一个小故障，或者可能是它当前使用的sass版本。不过，感谢您的帮助。