Как я могу получить доступ к логической переменной из файла HTML или TS в Scss?

Question

У меня есть changes переменная, которая является логической в ​​файле component.ts. Эта переменная также используется в файле .html. Я пытаюсь получить доступ к этой переменной в файле .scss и на основании логического условия, если true, мобильные свойства должны применяться на веб-сайте. Как я могу получить доступ к этой логической переменной в файле 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, вы не можете.

Вместо этого вы можете связать класс CSS / SCSS в шаблон в зависимости от значения переменной в элементе HTML, например -

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

Здесь яЯ добавил комбинацию, класс, который всегда применяется по умолчанию, и класс Dynamic CSS, надеюсь, это поможет.

Обновление -

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