Функция Darken для темы css - Ошибка: аргумент `$ color` для` darken ($ color, $ amount) `должен быть цветом

Question

Я пытаюсь добавить опцию, чтобы изменить цвет сайта.Итак, у меня есть цветовое поле, которое работает нормально, но проблема в том, что мне нужно изменить цвет на 10% темнее, когда мышь наводит курсор.Функция darken говорит, что первый аргумент должен быть цветом.

Error: argument `$color` of `darken($color, $amount)` must be a color

Мой код следующий:

:root {
  --main-colour: #f06d06;
}

$colour-primary: var(--main-colour);


.btn {
    background-color: $colour-primary;

    &:hover {
       background-color: darken($colour-primary, 10%);
    }
}

Мне нужна переменная --main-color, потому что она будет использоваться для изменения цвета в реальном времени.

Есть идеи?

Большое спасибо

Answer 1

Эта проблема исходит от Bootstrap.

Если вы работаете с фреймворком, таким как React или angular, не забудьте импортировать функцию перед переменными.

@import 'functions';
@import 'variables';

Answer 2

Вам необходимо импортировать 3 файла

@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins";

Answer 3

var(--main-colour) - это функция CSS, которая интерполируется во время выполнения (поэтому она будет решена ПОСЛЕ компиляции SCSS).SCSS компилируется, поэтому все его функции рассчитываются до и не изменяют время выполнения.

Проблема в вашем коде возникает из-за того, что для функции darken требуется допустимый цвет для выполнения вычислений, а во время компиляции - все этополучает это var(--main-colour), а не сам цвет.(darken является функцией SCSS, а не функцией CSS, поэтому ее нельзя изменить во время выполнения).