Scss 按钮混合

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 == 'blue'){ 的 mixin，我尝试过没有单引号和括号。

Answer 1

条件应该是

if($background == blue)

你还有 2 个其他的 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;
}