Как сделать чтобы scss mixin добавлял стили однократно

Иногда требуется, чтобы стили или часть стилей, формируемых миксином, добавлялись однократно.

Например, ваш миксин добавляет анимацию и при этом объявляет блок @keyframes, который не зависит от параметров и для всех анимированных блоков одинаков.

Можно было бы вынести объявления @keyframes, отделив их от функции (миксина). Естественно, что вам придется добавить их в css уже не учитывая, используется анимация или нет. Также это создаст неудобства поддержки такого кода.

Есть более приятное решение этой проблемы — использование флага. Рассмотрим scss код:

Такой миксин будет добавлять @keyframes myKeyframes только один раз, сколько бы вы его не вызывали. Достигается это использованием переменной-флажка $myKeyframes-added, которая изначально устанавливается как false, а при первой вставке блока с @keyframes, меняет своё значение на true.