Функция затемнения для css тем - Ошибка: аргумент `$ color` из` darken ($ color, $ amount) `должен быть цветом
Пытаюсь добавить возможность изменить цвет сайта. Итак, у меня есть цветовое поле, которое работает нормально, но проблема в том, что мне нужно изменить цвет на 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, потому что она будет использоваться для изменения цвета в реальном времени.
Любые идеи?
Большое спасибо
Ответы 5
var(--main-colour) - это функция CSS, которая интерполируется во время выполнения (поэтому она будет разрешена ПОСЛЕ компиляции SCSS).
SCSS скомпилирован, поэтому все его функции вычисляются раньше и не меняют время выполнения.
Проблема в вашем коде возникает из-за того, что функция darken требует действительного цвета для выполнения вычислений, и во время компиляции все, что она получает, - это var(--main-colour), а не сам цвет. (darken - это функция SCSS, а не функция CSS, поэтому ее нельзя изменить во время выполнения).
и какое решение?
@ValRob К сожалению, нет прямого решения этой проблемы в текущем состоянии. Если вам нужно затемнить цвет в CSS, вы скорее ищете решение на основе JS.
Это наиболее краткое объяснение, которое я видел по этому поводу, и хотя мне не нравится, что он работает таким образом, он имеет полный смысл.
Вместо использования var используйте $. тогда вы можете обойти проблему: $green: hsl(154, 59%, 51%); background: darken($green, 10%);
Эта проблема исходит от Bootstrap.
Если вы работаете с такими фреймворками, как React или angular, не забудьте импортировать функцию перед переменными.
@import 'functions';
@import 'variables';
Вам нужно импортировать 3 файла
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
Как уже было сказано, невозможно. Однако в некоторых случаях filter: brightness(90%); может быть обходным решением. Подробнее о фильтрах CSS здесь.
В новой версии вам необходимо импортировать переменные начальной загрузки. Если патч файла проверки ошибок по-прежнему, он решает после импорта переменных начальной загрузки, я не импортировал переменные начальной загрузки, ... @import "~ bootstrap / scss / functions"; @import '~ bootstrap / scss / variables';
Я пытаюсь воспроизвести этот пример: css-tricks.com/css-custom-properties-theming. Цвет фона работает нормально, единственная проблема заключается в том, что я пытаюсь использовать цвет с функцией затемнения.