SCSS'da mixin nima?

Savol

SCSS'da mixin nima va undan qanday foydalanish kerak?

Qisqa javob

@mixin — bir xil qoidalarni takrorlamaslik uchun istalgan selektorga @include orqali ulash va parametrlash mumkin bo'lgan (funksiyaga o'xshab) nomlangan, qayta ishlatiladigan CSS-stillar blokidir.

Batafsil javob

Mixin ko'p takrorlanadigan xususiyatlar to'plamini (flex orqali markazlashtirish, ro'yxatni reset qilish, media so'rovlar, vendor-prefikslar) nusxalash muammosini hal qiladi. @mixin nom(parametrlar) { ... } orqali e'lon qilinadi va @include nom(qiymatlar) orqali chaqiriladi.

Xususiyatlari:

• Standart qiymatga ega parametrlarni belgilash mumkin.
• Mixin ichida ichma-ichlik, media so'rovlar, psevdoklasslarni ishlatish mumkin.
• Maxsus @content bor, u mixinga tashqaridan ixtiyoriy stillar blokini uzatish imkonini beradi.

Mixin @extenddan farqlanadi: @extend selektorlarni bitta CSS-qoidani bo'lishishga majbur qiladi (kompilyatsiya qilingan CSS'da selektorlarni birlashtiradi), @mixin esa stillar blokini har bir chaqirilgan joyga nusxalaydi — bu moslashuvchanroq (parametrlarni uzatish mumkin), lekin faol ishlatilganda yakuniy CSS hajmini oshirishi mumkin.

Misol

@mixin flex-center($direction: row, $gap: 0) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
  gap: $gap;
}

@mixin respond($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.card {
  @include flex-center(column, 16px);

  @include respond(768px) {
    flex-direction: row;
  }
}

Quyidagicha kompilyatsiya qilinadi:

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Qo'shimcha savollar

• @mixin @extend va @functiondan nimasi bilan farq qiladi?
• Mixin ichidagi @content direktivasi nima qiladi?
• Katta loyihada mixin'dan faol foydalanishda yakuniy CSS'ning takrorlanishidan qanday qochish mumkin?