Почему s css mixin не возвращает цвет? - PullRequest
Новая
       16

Почему s css mixin не возвращает цвет?

0 голосов
/ 08 апреля 2020

Я пытаюсь использовать миксин для генерации простого набора свойств, просто color и display: flex. Когда я использую миксин при циклическом просмотре цветов темы, он прекрасно компилируется, но когда я использую его сам по себе, он возвращает только свойство flex.

Вот миксин: 

@mixin flex-and-color($color) {
    display: flex;
    color: theme-color($color);
    @debug($color);
}

Вот где я выполняю миксин: 

.validation-inline {

    // IT DOESN'T WORK HERE
    .validation-fail {
        @include flex-and-color($danger);
    }

    .validation-disabled {
        @include flex-and-color(#6d6d6d);
    }

    // BUT IT DOES WORK HERE
    @each $color,
    $value in $theme-colors {
        .validation-#{$color} {
            @include flex-and-color($color);
        }
    }
}

@debug($color) отображается в обоих сценариях ios, поэтому я не уверен, почему это не работает. Есть идеи?

Обновления

значения моей темы выглядят как 

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark,
  ),
  $theme-colors
);

Переменные цвета - это просто шестнадцатеричные значения

Вывод css выглядит this 

.validation-inline .validation-fail {
  display: flex;
}
.validation-inline .validation-disabled {
  display: flex;
}
.validation-inline .validation-primary {
  display: flex;
  color: #007FA3;
}
.validation-inline .validation-secondary {
  display: flex;
  color: #6c757d;
}
.validation-inline .validation-success {
  display: flex;
  color: #008638;
}
.validation-inline .validation-info {
  display: flex;
  color: #007FA3;
}
.validation-inline .validation-warning {
  display: flex;
  color: #FFB81C;
}
.validation-inline .validation-danger {
  display: flex;
  color: #DB0020;
}
.validation-inline .validation-light {
  display: flex;
  color: #f8f9fa;
}
.validation-inline .validation-dark {
  display: flex;
  color: #343a40;
}
.validation-inline .validation-default {
  display: flex;
  color: #eeeeee;
}

Цвета: 

$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$gray-100: #f8f9fa !default;
$gray-600: #6c757d !default;
$gray-800: #343a40 !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$default: #efefef;

Чтобы получить цвета, я использую функцию bootstrap theme-color 

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}
...