میکسین (@mixin)

«میکسین (Mixin)» یک الگوی آماده CSS است. با @mixin آن را می سازیم و با @include هرجا لازم شد استفاده می کنیم. بنابراین کد تکراری حذف می شود و تغییرات سریع تر انجام می شود؛ مثل برگه تقلب مدرسه!

ساخت میکسین با @mixin

میکسین مجموعه ای از قوانین است. بعداً همان را در چند جای مختلف فراخوانی می کنیم.

سینتکس پایه

@mixin name {
  property: value;
  property: value;
}

مشاهده در ادیتور

نمونه میکسین important-text

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

مشاهده در ادیتور

نکته: خط تیره و زیرخط در نام ها یکسان محسوب می شوند. یعنی important-text و important_text یکی اند.

استفاده از میکسین با @include

برای کاربرد، داخل سلکتور بنویس: @include mixin-name;. سپس قوانین میکسین به همان بخش اضافه می شود.

فراخوانی میکسین

.danger {
  @include important-text;
  background-color: green;
}

مشاهده در ادیتور

خروجی CSS پس از ترنس پایل

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

مشاهده در ادیتور

میکسینِ درونِ میکسین

می توانی داخل یک میکسین، چند میکسین دیگر را هم @include کنی.

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

مشاهده در ادیتور

ارسال آرگومان به میکسین

«آرگومان (Argument)» یعنی ورودی متغیر برای میکسین. بنابراین میکسین انعطاف پذیر می شود.

/* تعریف میکسین با دو آرگومان */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);
}

.myNotes {
  @include bordered(red, 2px);
}

مشاهده در ادیتور

خروجی CSS مربوط

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

مشاهده در ادیتور

مقادیر پیش فرض برای آرگومان ها

می توانی برای آرگومان ها مقدار پیش فرض بگذاری؛ پس فقط موارد تغییر را تعیین کن.

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

مشاهده در ادیتور

.myTips {
  @include bordered($color: orange);
}

مشاهده در ادیتور

میکسین برای پیشوندهای مرورگر

«پیشوند فروشنده (Vendor Prefix)» نسخه سازگار با مرورگرهاست. میکسین ها تکرار را حذف می کنند.

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

مشاهده در ادیتور

سه گام عملی

1. یک میکسین قابل استفاده بساز.
2. با @include در اجزای مختلف استفاده کن.
3. ترنس پایل کن و خروجی را بررسی کن.

ادامه مسیر: به ایمپورت در Sass برگرد، یا صفحه متغیرها در Sass و تو در تو در Sass را ببین. برای ناوبری، لینک میکسین Sass را نگه دار.

جمع بندی سریع

• @mixin می سازد؛ @include استفاده می کند.
• آرگومان ها میکسین را انعطاف پذیر می کنند.
• مقادیر پیش فرض، کدنویسی را کوتاه تر می کنند.
• برای پیشوندها، یک میکسین بساز.