Проблемы с переменными свойства цвета в SCSS

Разработка
1

Может ли кто-то из сведущих гуру кода объяснить, почему это всегда выдает ошибку (независимо от содержимого файла settings.yaml):

.d-header {
    background: rgba($header_color, $transparency);
}

а это — нет?

.d-header {
    background: rgba(darkslategrey, 0.5);
}

Даже если я изменю код так, чтобы использовать $header_color в формате rgb(47, 79, 79), всё равно возникает ошибка, связанная с элементом $color. :thinking:

2

Это работает для меня?

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
3

Да, но как только я помещаю переменные в settings.yml вот так, у меня это не работает. Я получаю ошибку: «$color не является цветом», хотя я не использую здесь переменную $color. Поэтому предполагаю, что это может быть связано с интерполяцией, которую я не понимаю.

header_color:
  type: string
  default: ""
  description: 
    en: "..."
  
transparency:
  type: string
  default: ""
  description: 
    en: "..."

По-моему, дело в том, как компилируется CSS. Переменные работают, когда объявлены во время выполнения CSS, но не динамически через отдельный файл settings.yml. :thinking:

Это тоже не работает:

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
4

Привет, Лилли!

Не так давно я столкнулся с той же проблемой. :smile:

Короткий ответ: темы и CSS-переменные рассматриваются как строки. Хотя вы можете использовать их в таких атрибутах, как color, background, border и так далее, их нельзя применять в SCSS-функциях цвета.

Проблема не связана с Discourse:

Существует чрезмерно сложный способ обойти это, который я не пробовал: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

5

Привет, Lilly :wave:

Чтобы это работало в настройках, нужно создать переменные на их основе. :slightly_smiling_face:

Вот быстрый пример:

6

Это здорово, спасибо @Don :slight_smile:

7

Это не первый раз, когда я говорю «это невозможно», а ты отвечаешь: «на самом деле возможно», Дон :smile:

Наверное, и не последний раз тоже :see_no_evil: