Логическое свойство SCSS не работает: активное свойство - PullRequest
Новая
       16

Логическое свойство SCSS не работает: активное свойство

0 голосов
/ 31 октября 2019

Я установил для логической переменной значение false, и при нажатии кнопки я хочу изменить цвет фона в файле scss. Но похоже, что переменная дисплея не установлена ​​в значение true: активно, как я могу добиться этой функциональности?

Вот мой файл scss 

$display : false;

.bot {
  &:active {
    $display: true;

    display: none;
  }

}

@if $display {
  .bot {
    background-color: brown;

  }
}

Вот мой файл HTML 

<button class="bot" (click)="xy()">Table
    </button>

1 Ответ

0 голосов
/ 01 ноября 2019

Правильный способ реализовать то, чего вы хотите достичь, - это просто включить CSS-селектор .active с помощью JavaScript:

HTML 

<button class="bot" onclick="xy()">Table</button>

Scss 

.bot {
  background-color: brown;
  &:active {
    display: none;
  }
}

Функция JavaScript 

const xy = () => {
   let btn = document.querySelector("button");
   btn.classList.toggle(":active");
}

Посмотрите, как это работает в этой скрипке: https://jsfiddle.net/ezpvc16m/2/

Нет смысла переключать селектор CSS, такой как :active, с использованием переменных Sass и логических значений;:active уже работает как true или false. Он активируется всякий раз, когда элемент (в данном случае кнопка) активируется пользователем. В противном случае он не активируется.

- Также имейте в виду, что Sass скомпилирован в CSS, а CSS не имеет доступа к переменным и логическим значениям Sass.

...