Делайте больше с меньшими затратами
Большинство современных фреймворков JavaScript включают стили несколькими способами с момента появления популярных препроцессоров CSS. Вроде Сас. Эти препроцессоры являются ответами на распространенные вопросы, такие как:
- Как поделиться стилями в приложении?
- Как создавать стили с меньшим количеством запутанных строк кода?
Введите миксины.
В разработке программного обеспечения Mixin может относиться к одной из двух вещей:
- узор/объект
- правило препроцессора CSS
Правило препроцессора примеси: помогает сделать стили модульными и общими. Например, при стилизации списка фруктов в приложении. Апельсины и яблоки можно отличить по цвету. Однако, поскольку они оба являются фруктами, они также могут иметь некоторые общие стили.
Миксин fruit можно создать для общих стилей с помощью простого объявления в файле scss: @mixin fruit {}. Включение стилей fruit в класс стиля так же интуитивно понятно: @include fruit. С несколькими примесями вы также можете создавать и стилизовать смешанные фрукты, включающие множество примесей.
Преимущество:по мере того, как стили разрастаются и становятся более конкретными, списки классов в html-элементах отпадают.
Шаблон примеси: позволяет объектам JavaScript (JS) получать дополнительную функциональность от одного или нескольких объектов. Без наследования классов.
Почему это важно?
В JS вы не можете расширить класс несколькими классами. Например, если вы хотите создать класс смешанных фруктов, который имеет качества обоих классов Apples и Oranges. Вы не сможете расширить оба класса. Однако вы можете создать миксин, который добавит эти качества классу смешанных фруктов.
Mixin — это просто объектный литерал — ничего особенного. Затем с помощью Object.assign() вы можете скопировать свойства и методы из миксина в prototypeproperty класса смешанных фруктов.
🤔 Основные понятия те же: сокращать, повторно использовать, перерабатывать? Просто разные контексты.
Ресурсы и дополнительная литература:
