Использование градиентов с картой цветов scss - возможно ли это?

Question

Я использую Bootstrap 4, и мне было интересно, можно ли использовать градиенты на карте $theme-colors во время их создания в приложении.

Пример использования

$theme-colors: ( 
    "brand-gradient": background: -moz-linear-gradient(-45deg, #fff 0%, #000 100%);
);

так что, если я хочу, чтобы кнопка была градиентной, я мог бы сделать

<button class="btn btn-brand-gradient">Test</button>

И затем добавление градиента, а также использование запасных вариантов для старых браузеров, как обычно.

Просто вопрос из любопытства.

Answer 1

К сожалению, вы не можете. По крайней мере, не так.

Класс btn использует значения из $theme-colors следующим образом:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

Обычно это позволяет вам использовать класс btn-brand-gradient, как вы предлагаете, если вы добавили класс в $theme-colors.

Если вы посмотрите на миксин button-variant(), вы увидите, что он использует другой миксин под названием gradient-bg() для фона кнопки и границы.

В этот миксин , фон настроен так:

background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;

Аргумент $color в CSS linear-gradient должен быть допустимым значением цвета , а линейный градиент в этом случае не является.