Урок 03 · 11 хв

@mixin і @include

Шматок властивостей із параметрами. Не копіпаста flex-центру в десяти місцях.

@mixin center { display: flex; align-items: center; } і @include center;. З аргументом: @mixin type($size) { font-size: $size; }. Mixin вставляє властивості (або вкладені правила) в точку include. Це не «функція браузера».

Центр

Можна спитати про це правило«Mixin — повтор властивостей, а не «компонент»»

@content усередині mixin — вставити блок того, хто викликає: обгортка-медіазапит.
Одну властивість повторювати mixin-ом не варто: вистачить змінної.
Після збірки в CSS буде розгорнутий дубль властивостей. Це ок, gzip не образиться на розумний розмір.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. @include робить
2. Навіщо параметр mixin?
3. Mixin створює HTML-тег?