یکی از امکانات مهمی که پیش پردازنده های CSS در اختیار ما قرار می دهند , Mixin است. عملکردی شبیه یک تابع به همراه پارامترهای ورودی می تواند فایده بسیار زیادی در کدنویسی CSS داشته باشد. تعریف یک تابع و استفاده چندباره از آن در جاهای مختلف.

با پیشرفت تکنولوژی های سمت وب , دیگه کمتر کسی مستقیما از CSS استفاده می کند و استفاده از پیش پردازنده های CSS بیشتر مرسوم شده است. از پیش پردازنده های CSS می شود به Sass , Less و Stylus اشاره کرد. در این مقاله در مورد Mixin ها که یکی از مهمترین مزیت های این پیش پردازنده هاست , صحبت می کنم. اگر با مفاهیم مقدماتی LESS آشنا نیستید , می تونید این مقاله رو مطالعه کنید.

Mixin ها در LESS

در LESS سعی شده تا ساختار قدیمی CSS تا جای ممکن حفظ شود. به همین علت شما می تونید خیلی ساده , درست مثل انتخاب کردن یک المان , از ID و یا class استفاده کنید.

.border {
    border: 1px solid #ccc;
}
#shadow {
    -webkit-box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.2);
}

سپس می تونیم به شکل زیر از این Mixin های تعریف شده استفاده کنیم.

.header {
    .border;
    #shadow;
    color: #000;
}

بعد از کامپایل , خروجی Mixin های تعریف شده به خروجی ما اضافه می شوند.

.header {
    border: 1px solid #ccc;
    -webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
    color: #000;
}

Mixin های تو در تو

همانطور که مشاهده کردید , تعریف یک Mixin در LESS بسیار ساده است. تعریف Mixin های تو در تو هم بسیار سادست و فقط کافیه اونا رو درون هم تعریف کنید.

.border {
    border: 1px solid #ccc;
    .bottom {
        border-bottom: 1px solid #ccc;
    }
    .top {
        border-top: 1px solid #ccc;
    }
}

برای استفاده از bottom. کافیه اول border. رو فراخوانی کنیم و سپس از طریق راه های مختلف که در زیر بیان شده است bottom. را بنویسیم.

.header {
    .border .bottom;
}

.header {
    .border > .bottom;  
}

.header {
    .border.bottom;
}

خروجی تمام متدهای بالا با هم برابر و معادل کد زیر است.

.header {
    border-bottom: 1px solid #ccc;
}

Mixin ها به همراه پارامترهای ورودی

در LESS می توان برای Mixin ها پارامترهای ورودی در نظر گرفت تا انعطاف کدها رو بالا ببریم. درست مثل یک تابع با مقادیر ورودی.

.border(@border-width; @border-style; @border-color) {
    border: @border-width @border-style @border-color;
}

همانطور که می بینید , یک Mixin با نام border تعریف کردیم که ۳ متغیر را به عنوان ورودی دریافت می کند و در بدنه تابع قرار می دهد. حالا می تونیم هرجا که خواستیم , Mixin تعریف شده رو به اون صورت که میخواهیم استفاده کنیم. برای مثال:

.header {
    .border(2px ; dotted ; red);
}

.footer {
    .border(1px ; solid ; #00FF00);
}

یک بار Mixin رو تعریف می کنیم و در جاهای مختلف , با پارامترهای ورودی متفاوت آن را فراخوانی می کنیم.

.header {
  border: 2px dotted red;
}

.footer {
  border: 1px solid #00FF00;
}

تعریف پارامترهای ورودی پیش فرض برای یک Mixin

به این موضوع دقت کنید که باید در این حالت , مقادیری رو به عنوان پارمتر ورودی به تابع ارسال کنید. در غیر اینصورت با پیغام خطا مواجه خواهید شد. برای جلوگیری از بروز این گونه خطاها می توان برای پارامترهای ورودی , مقادیر پیش فرضی را در نظر گرفت تا در صورت ارسال نشدن مقدار , آن پارامتر از مقدار پیش فرض خود استفاده کند.

.border(@border-width: 1px; @border-style: solid; @border-color: black) {
  border: @border-width @border-style @border-color;
}

.header{
  .border();
}

.main{
  .border(2px);
}

.side{
  .border(@border-style: dashed;);
}

.footer{
  .border(3px,dashed,#00FF00);
}

یک Mixin با ۳ پارامتر ورودی تعریف کردیم و به اشکال مختلف آن را فراخوانی کردیم. کد بالا بعد از کامپایل به شکل زیر نمایش داده می شود.

.header {
  border: 1px solid black;
}

.main {
  border: 2px solid black;
}

.side {
  border: 1px dashed black;
}

.footer {
  border: 3px dashed #00FF00;
}

با استفاده از Mixin ها , می تونید سرعت کدنویسی خودتون رو خیلی بالا ببرید و همچنین کدهای شما مرتب تر خواهند بود. همچنین می تونید از LESS Elements هم استفاده کنید. در این فایل چند Mixin کاربردی نوشته شده که می تونید در پروژه خودتون استفاده کنید.

حتما نظرات و سوالات خودتون رو کامنت کنید