Миксины и включения

Примесь в Sass — это повторно используемый блок объявлений CSS. В отличие от обычного класса, она может принимать параметры, поэтому она гибче, чем копирование и вставка. Определяйте примесь с помощью @mixin, а используйте с помощью @include.

Примесь без параметров — это просто повторно используемый блок:

Передавайте значения в примесь, чтобы настроить её вывод:

Задавайте значения по умолчанию для аргументов примеси, чтобы их можно было не указывать:

Передавайте аргументы примеси по имени для большей ясности:

Примеси могут принимать блок содержимого с помощью @content. Переданный блок вставляется в то место, где находится @content:

Распространённая примесь для медиазапросов:

Примесь для единообразного масштаба текста:

Примеси выводят объявления CSS, а функции возвращают значение. Используйте примесь, когда нужно вывести несколько правил CSS, и функцию, когда требуется одно вычисляемое значение.

Слишком большое количество примесей создаёт абстрактную косвенность, которую сложно отлаживать. Создавайте примесь, только если шаблон используется не менее 3 раз. Для одноразовых стилей просто напишите CSS напрямую.

Для чего нужен @content внутри определения примеси Sass?

Определяйте примеси с помощью @mixin, а используйте их с помощью @include. Примеси принимают параметры, для которых можно задать значения по умолчанию. @content позволяет вызывающей стороне вставлять блоки CSS в примесь, что даёт возможность создавать шаблоны-обёртки, например помощники для медиазапросов. Создавайте примеси только для шаблонов, используемых несколько раз, чтобы избежать издержек абстракции.