Scss Button Mixin

Question

我一直在努力解决这个问题几个小时，但我只是不明白我做错了什么。也许它不是我，而且它是代码套件中的一个小故障？我已经构建了一个scss按钮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;
        }

    }

尺寸和全尺寸条件工作得很好。但背景却没有。它没有做任何事情。现在使用它的Scss是：

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

有了这个，我应该看到两个不同的颜色按钮。标记和Scss将得到改进，但这是用于测试目的的。它似乎在这里工作正常：http://sassmeister.com/gist/da3707a3e03609f8991c

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

哦，当我查看这个问题时，我注意到我粘贴了有@if的混音（$ background ==＆＃39; blue＆＃39;）{我试过没有单引号而没有括号。

Answer 1

条件应为

if($background == blue)

此外，您还有其他2个mixins，您应该在其中解析或删除

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