使用 CSS 变量的 SCSS 中的 if 语句

Question

我的 JS 代码在页面上设置了一个变量：

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

我的 SCSS 代码将该变量用于某些内容：

  $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

如果您完全从样式表中删除逻辑，而是依赖 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变量。