SCSS 混合错误“参数 $displayprovided more than once in call to Mixin box”

Question

我有一个名为 box() 的 mixin，我在我的 SCSS 中一直使用它，它工作得很好，除了一个我得到编译错误的特定位置。我看不出我使用它的方式有什么不同或问题是什么。如果我用纯 CSS 替换 mixin，SCSS 编译得很好。

错误是

Compilation Error
Error: parameter $displayprovided more than once in call to Mixin box
        on line 504 of sass/c:\Users\Mark Kortink\Dropbox\Python\projects\metapplica\solution\static\css\scss\mxa2.scss, in mixin `box`
        from line 497 of sass/c:\Users\Mark Kortink\Dropbox\Python\projects\metapplica\solution\static\css\scss\mxa2.scss
>>      $border: 1px solid $hint-border!important,

   --^

使用 mixin 得到错误的 SCSS 是

.mxa-hint {
    /*! Enter custom CSS here */
    @include box(
    $position: relative,
    $display: inline-block,      
    );
    .mxa-hint-text {
        /*! Enter custom CSS here */
        @include box(                                <<< line 497 in error message
        $visibility: hidden,
        $size: $hint-size,
        $border: solid,
        $padding: $hint-padding,
        $color: $hint-color!important,
        $back-color: $hint-back-color!important,
        $border: 1px solid $hint-border!important,    <<< line 504 in error message
        $position: absolute,
        $layer: z(dropdown),
        $width: $hint-width,
        $align: $hint-align,
        );
    }  
    &:hover .mxa-hint-text { 
        /*! Enter custom CSS here */
        visibility: visible;
    }
}

用 CSS 替换 mixin 没有报错

.mxa-hint {
    /*! Enter custom CSS here */
    position: relative;
    display: inline-block;

    .mxa-hint-text {
        /*! Enter custom CSS here */
        visibility: hidden;
        font-size: $hint-size;
        border: solid;
        padding: $hint-padding;
        color: $hint-color!important;
        background-color: $hint-back-color!important;
        border: 1px solid $hint-border!important;
        /* Position the hint */
        position: absolute;
        z-index: z(dropdown);
        /* Style the text */
        width: $hint-width;
        text-align: $hint-align;
       }

    &:hover .mxa-hint-text {
        /*! Enter custom CSS here */
        visibility: visible;
    }
}

有人对这里可能发生的事情有任何线索吗？ 谢谢

更多信息 如果我从 mixin 调用它的作品中删除一行 border: 1px solid $hint-border!important; ！？！ 这条线没有任何问题，它在 mixin 之外运行良好，如果我在 mixin 调用中将 $hint-border 替换为它的值（灰色），我仍然会收到错误消息。奇怪的东西。

混音 这是有帮助的mixin。

@mixin box(
    /* Position/Display */
    $display: null, 
    $visibility: null,
    $position: null, 
    $left: null,
    $right: null,
    $top: null,
    $bottom: null,
    $layer: null,
    $overflow: null,
    $overflow-horizontal: null,
    $overflow-vertical: null,
    /* When display table */
    $table-layout: null,
    $caption-side: null,
    $border-collapse: null,
    $border-spacing: null,
    $empty-cells: null,
    /* When display flex */
    $flex-direction: null,
    $flex-justify: null, /* horizontal*/
    $flex-align: null, /* vertical*/
    $flex-align-self: null,
    $flex-wrap: null,
    $flex-order: null,
    $flex: null, /* G S B*/
    $flex-grow: null,
    $flex-shrink: null,
    $flex-basis: null,
    /* When display grid */
    /* Box */
    /*T R B L, T RL B, TB RL, TRBL*/
    $margin: null, 
    $padding: null,
    $height: null,
    $width: null,
    $max-height: null,
    $min-height: null,
    $max-width: null,
    $min-width: null,
    $border-style: null,
    $border-width: null,
    $border-color: null,
    $border-radius: null,
    /*W S C*/
    $border: null, 
    $border-top: null,
    $border-right: null,
    $border-bottom: null,
    $border-left: null,
    /*W S C*/
    $outline: null, 
    $outline-width: null,
    $outline-style: null,
    $outline-color: null,
    $outline-offset: null,
    /* Text */
    $color: null,
    $size: null,
    $family: null,
    $weight: null,
    $style: null,
    $variant: null,
    $align: null,
    $vertical-align: null,
    $back-color: null,
    $decoration: null,
    $decoration-color: null,
    $decoration-style: null,
    /* Misc */
    $list-style: null,
    $cursor: null,
    ) {
    /* Set the position/display properties.*/
    display: $display;
    visibility: $visibility;
    position: $position;
    left: $left;
    right: $right;
    top: $top;
    bottom: $bottom;
    z-index: $layer;
    overflow: $overflow;
    overflow-x: $overflow-horizontal;
    overflow-y: $overflow-vertical;
    /* When display table */
    table-layout: $table-layout;
    caption-side: $caption-side;
    border-collapse: $border-collapse;
    border-spacing: $border-spacing;
    empty-cells: $empty-cells;
    /* When flex.*/
    flex-direction: $flex-direction;
    justify-content: $flex-justify;
    align-items: $flex-align;
    align-self: $flex-align-self;
    flex-wrap: $flex-wrap;
    order: $flex-order;
    flex: $flex;
    flex-grow: $flex-grow;
    flex-shrink: $flex-shrink;
    flex-basis: $flex-basis;
    /* Set box properties.*/
    margin: $margin;
    padding: $padding;
    height: $height;
    width: $width;
    max-height: $max-height;
    min-height: $min-height;
    max-width: $max-width;
    min-width: $min-width;
    border: $border;
    border-style: $border-style;
    border-width: $border-width;
    border-color: $border-color;
    border-radius: $border-radius;
    border-top: $border-top;
    border-right: $border-right;
    border-bottom: $border-bottom;
    border-left: $border-left;
    outline: $outline; 
    outline-width: $outline-width;
    outline-style: $outline-style;
    outline-color: $outline-color;
    outline-offset: $outline-offset;
    /* Set text/content properties.*/
    color: $color;
    font-size: $size;
    font-family: $family;
    font-weight: $weight;
    font-style: $style;
    font-variant: $variant;
    text-align: $align;
    background-color: $back-color;
    text-decoration: $decoration;
    text-decoration-color: $decoration-color;
    text-decoration-style: $decoration-style;
    /* Lists (type pos img) */
    list-style: $list-style;
    /* Misc */
    cursor: $cursor;
}

Answer 1

哇！边界在 mixin 参数中提供了两次。将在此处留下帖子，以防其他人搜索相同的错误消息。