Если операторы в S CSS с использованием CSS переменных

Question

Мой JS код устанавливает переменную на странице:

  if (error) {
    document.querySelector('body')?.style.setProperty('--pickererror', `'${ error }'`);
  }

Мой S CSS код использует эту переменную для некоторого содержимого:

  $error: var(--pickererror);

  // ERROR MESSAGE
  .picker-toolbar::before {
    content: $error;
    color: red;
    padding: 5px 35px 0px 35px;
    text-align: center;
  }

  .picker-toolbar {
    @if str-length($error) > 0 {
      order: 1 !important;
    }
  }

::before раздел работает полностью. Однако предложение @if выполняется, даже если ошибки нет, а значение .picker-toolbar всегда равно order: 1.

Я проверил, что --pickererror отсутствует, когда нет ошибки JS. Я пробовал любое количество перестановок, таких как

1. Помещение строки @if перед строкой .picker-toolbar
2. Простое использование @if $error
3. Использование @if var(--pickererror) вместо переменной $error.

Как мне заставить это работать?

Answer 1

Что если вы полностью удалите logi c из таблицы стилей и вместо этого положитесь на значение свойства c dynamici из вашего JavaScript?

Например:

body {
  --pickererror: 0; // Default value for the "order" property
}

Если ваш JavaScript обнаруживает ошибку, --pickererror присваивается значение 1 !important;

if (error) {
  document.querySelector('body').style.setProperty('--pickererror', '1', 'important');
}

И в вашей таблице стилей вам нужно только одно правило, которое изменяет порядок, если JavaScript говорит так.

.picker-toolbar {
  order: var(--pickererror, 0); // Defaults to "0" also if the variable doesn't exist
}

Я понимаю, что это имеет смысл, только если вы используете --pickererror в основном как логическое значение (я подумал, поскольку вы проверяете, превышает ли его длина больше 0). Если вы на самом деле используете строковое значение, было бы лучше создать переменную --error-order для этой единственной цели, я думаю.