Как использовать mixin включить и расширить в scss скачать в хорошем качестве

Как использовать mixin включить и расширить в scss

SASS предоставляет два основных способа повторного использования стилей - @extend и mixins - в этой статье кратко описывается, как работают и какие использовать. TLDR: @extend с / без заполнителей лучше всего подходит для тех случаев, когда у вас есть общие статические, похожие стили, но они вызывают повторяющиеся классы, в то время как миксины лучше всего подходят для динамических стилей, в которых используются переданные аргументы, но они приводят к повторным объявлениям. @extend Синтаксис extends позволяет разделять стили между двумя селекторами. Это аналогично тому, как классы объединяются в HTML. Используя @extend, это можно записать так: .h1-заголовок { Размер шрифта: 30px; } содержание { @extend h1-heading; красный цвет; } Примеси Миксины очень похожи на расширения, например, используя миксины, мы могли бы сделать это: @mixin webfont () { семейство шрифтов: webfont, без засечек; вес шрифта: 700; } ... .foo { @include webfont (); } ... .бар { @include webfont (); } Как правило, если у вас нет динамических стилей, достаточно использовать @extend (желательно с заполнителями - если вы не ссылаетесь на класс в DOM). Использование mixins для статических стилей приводит к излишне раздутым таблицам стилей, поэтому рекомендуется сохранять объявления минимальными и только для динамических объявлений, поскольку они будут дублироваться.