У меня есть миксин, называемый box (), который я использую на протяжении всего S CSS, и он отлично работает, за исключением одного конкретного места, где я получаю ошибку компиляции. Я не вижу никакой разницы в том, как я его использую или в чем проблема. Если я заменю миксин на чистый CSS, то S CSS скомпилируется нормально.
Ошибка:
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,
--^
S CSS, получающий ошибку с миксином:
.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 Я не получаю ошибку
.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;
}
}
У кого-нибудь есть какие-либо подсказки относительно того, что здесь может происходить? Спасибо
Дополнительная информация Если я уберу одну строку border: 1px solid $hint-border!important; из вызова 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;
}