SASS: карта - не возвращает цвет, пригодный для использования darken - PullRequest
Новая
       5

SASS: карта - не возвращает цвет, пригодный для использования darken

3 голосов
/ 06 марта 2020

Пример Codesandbox

Я пишу тему bootstrap, используя их документацию ЗДЕСЬ . Я получаю следующую ошибку при попытке использовать функцию darken().

аргумент $color из darken($color, $amount) должен быть цвета

Я задал другие вопросы относительно этой ошибки, но большинство из них, похоже, связаны с порядок загрузки bootstrap импорта. Я не думаю, что это то, что здесь происходит. Кажется, что то, что возвращается из map-get(), не считается цветом darken().

Пример: 

// Color Palette
$soft-black: #333333;
$digital-green: #2e7d32;
$digital-green-accent: rgba(47, 127, 51, .10);
$light-green: #84bd00;
$gold: #f0b323;
$gray: #797979;
$gray-accent: rgba(51, 51, 51, 0.44);
$white: #ffffff;
$light-grey: #d2d2d2;
$red: #cc092f;
$dark-green: #005005;
$background-green: #e9eeee;
$background-grey: #f5f5f5;
$teal: #208484;

$colors: (
        "soft-black": $soft-black,
        "digital-green": $digital-green,
        "light-green": $light-green,
        "gold": $gold,
        "gray": purple,
        "white": $white,
        "light-grey": pink,
        "red": $red,
        "dark-green": $dark-green,
        "background-green": $background-green,
        "background-grey": $background-grey,
        "teal": $teal,
);

// Overriding bootstraps theme colors
$theme-colors: (
        "primary": $digital-green,
        "secondary": $gray,
        "success": $light-green,
        "info": $teal,
        "warning": $gold,
        "danger": $red,
        "light": $white,
        "dark": $soft-black
);


// Hard overrides.
// When no sass variables exist to override in bootstrap    
@each $variant in ('primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'link') {
  $oc: darken(map-get($theme-colors, $variant), 7.5%);
  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: $oc;
    color: $oc;
  }
}

Странно, что это работает: 

  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: map-get($theme-colors, $variant);
    color: map-get($theme-colors, $variant);
  }

1 Ответ

1 голос
/ 06 марта 2020

Только что заметил ответ в комментариях после тренировки, у вас было лишнее 'link' в списке @each. —Вы должны опустить этот вопрос или пометить его как ответивший!

Но, чтобы вы больше не повторяли ту же ошибку и не должны поддерживать 2 списка, это будет намного лучше просто l oop на карте $theme-colors, например: 

@each $variant, $variant-color in $theme-colors {
  $oc: darken($variant-color, 7.5%);
  .btn-outline-#{$variant}.hover, .btn-outline-#{$variant}:hover {
    background-color: $oc;
    color: $oc;
  }
}

Ref: https://sass-lang.com/documentation/at-rules/control/each#with -maps

Обновленная версия Пример вашего Codesandbox

...