如何将布尔变量从 Html 或 ts 文件访问到 scss？

Question

我有 changes 变量，它在 component.ts 文件中是布尔值。此变量也用于.html 文件。我正在尝试在 .scss 文件中访问此变量，如果为真，则基于布尔条件，应在网站上应用移动属性。如何在 scss 文件中访问此布尔变量并应用于 &.Mobile 并确保更改与可编辑模板一起正常工作？

这是我的 .html 文件

    <div class="ab-table-filters">

这是我的 scss 文件

.bot {
  border-radius: 2px;
  text-align: left;
  width: 100%;

  @media (min-width: 700px) {
    display: none;
  }
}
      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }
  }
  .ab-table-filter {
    border-radius: 2px;


    @media (max-width: 700px) {
      display: none;
    }

    &.disabled {
      opacity: .4;
      pointer-events: none;

      &:hover {
        cursor: no-drop;
      }

}

}

Answer 1

IMO，你不能。

相反，您可以根据 HTML 元素中变量的值将 CSS/SCSS 类绑定到模板中，例如 -

<div [ngClass]="{'ab-table-filters':true, 'css-class': changes }">

在这里我添加了两个组合，默认情况下始终应用的类和动态 CSS 类，希望这会有所帮助。

更新-

@media screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}