سَس (Sass) در یک کلام محشره! چه به عنوان Sass یا SCSS ازش استفاده کنید، باعث افزایش بهره وری و ساده شدن کدهای پیچیده CSS میشه. اشکال یابی Sass خیلی ساده است و می تونیم کارهایی بیشتر از CSS خام باهاش انجام بدیم.

مقاله امروز ما در مورد میکسین (Mixin) های Sass هست و سعی می کنیم پاسخ این سوالات که چی؟ چرا؟ و چگونه از mixin ها استفاده کنیم؟ را بدهیم.

Mixin چیست؟

یک mixin یک تکه کد است که می توانیم در پروژه چندین بار از آن استفاده کنیم.مثل کاری که function در زبان هایی مثل PHP انجام می دهد.

برای مثال فرض کنید می خواهیم یک عنصر HTML را به صورت Flex نمایش دهیم.

.row {
display: -webkit-flex;
display: flex;
}

طبیعتا تگ های زیادی هستند که می خواهیم به صورت Flex نمایش یابند و تایپ دستورات بالا برای همه آنها به سرعت خسته کننده خواهد شد.اینجا جایی است که mixin وارد عمل می شود.

ایجاد یک Mixin

ایجاد یک mixin خیلی ساده است. تنها کاری که باید انجام دهیم نوشتن دستور @mixin و به دنبالش یک فاصله و بعد اسم mixin است و بعد آکولاد رو باز و بسته می کنیم. چیزی شبیه این:

@mixin flex {
// write the css here
display: -webkit-flex;
display: flex;
}

حالا می توانیم در هر جای کد به جای تایپ دستور flex از این mixin استفاده کنیم.

استفاده از Mixin

حالا که نحوه ایجاد mixin را دیدیم، باید روش استفاده از آن را نیز بدانیم.

برای استفاده از یک mixin، فقط کافیست از دستور @include و به دنبالش اسم mixin را وارد کنیم و در انتها یک سمی کولون ;

.row {
@include flex;
}

بعد از کامپایل این کد SCSS به CSS، این کد را خواهید دید:

.row {
display: -webkit-flex;
display: flex;
}

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

mixin ها همچنین می توانید آرگومان ورودی دریافت کنند و بدین ترتیب خروجی انعطاف پذیر تری اراده دهند.برای مثال، فرض کنید می خواهیم یک سیستم گرید بسازیم و مشخص کنیم که می خواهیم از flexbox استفاده کنیم یا float.

برای این کار می توانیم یک Mixin ایجاد کنیم، و یک آرگومان ورودی به آن پاس دهیم تا بتواند از بین این دو یکی را انتخاب کند.

برای پاس دادن آرگومان به Mixin این کار را در تعریف mixin انجام می دهیم:

@mixin grid($flex) {
@if $flex {
@include flex;
} @else {
display: block;
}
}

حالا، هر وقت بخواهیم میکسین grid را فراخوانی کنیم، باید یک آرگومان نیز پاس دهیم. همانطور که حدس زدید، این کار به روش زیر انجام می شود:

@include grid(true);

برای اینکه mixin بتواند چند ورودی دریافت کند، ورودی ها را بوسیله کاما (,) از هم جدا می کنیم مثل این:

@mixin grid($flex, $full-width) {
// code goes in here
}

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

توابع در زبان های برنامه نویسی (شامل SASS) اجازه می دهند تا برای یک آرگومان، مقدار پیش فرض تعیین کنیم. همین کار را برای mixin هم می توان انجام داد.

نحوه پاس دادن مقدار پیش فرض به آرگومان به این صورت است:

@mixin grid($flex: true) {
// code here
}

ما هر چند متغیر که بخواهیم می توانیم پاس دهیم ولی هر متغیری که مقدار پیش فرض دارد باید آخر لیست آرگومان ها قرار بگیرد.

یعنی به این شکل نمی توانید متغیرهای mixin را تعریف کنید.

@mixin grid($flex: true, $max-width) {
// code here
}

در این صورت SCSS یک خطا به صورت زیر صادر خواهد کرد:

Required argument $max-width must come before any optional arguments.

آرگومنت های متغیر

در CSS دستوراتی مثل padding و margin داریم که می توانند از 1 الی 4 مقدار را قبول کنند.

مثل این:

a {
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 50px;
padding: 10px 20px 50px 20px;
}

همانطور که می دانید همه این دستورات درست هستند.

در SCSS هم ما لیست ها را داریم. مقادیر padding بالا در SCSS مثل لیست رفتار می کنند. ولی راه دیگری وجود دارد که با آن می توانیم این مقادیر را به صورت متغیر استفاده کنیم و نه لیست.

برای درک بهتر اجازه دهید یک Mixin برای padding بسازیم.

@mixin padding($values) {
@each $var in $values {
padding: #{$var};
}
}

اگر ما از این mixin استفاده کنیم با @include padding(2px 4px 6px); نتیجه نهایی این خواهد بود:

a {
padding: 2px;
padding: 4px;
padding: 6px;
}

برای تبدیل این متغیرها به لیست، می توانیم سه نقطه … بعد از اسم متغیر اضافه کنیم مثل این

@mixin padding($values...) {
@each $var in $values {
padding: #{$var};
}
}

و اگر به این صورت آن را فراخوانی کنیم

a {
@include padding(2px 4px 6px);
}

حالا این کد را دریافت خواهیم کرد

a {
padding: 2px 4px 6px;
}

آرگومنت های متغیر (ادامه دار)

یکی دیگر از کاربردهای … گسترش آرگومنت هاست.

شاید عجیب به نظر برسد برای همین مثال زیر می توانید بهتر کمک مان کند.

$style1: 100%, 70px, #fo6d06;
$style2: (background: #bada55, width: 100%, height: 100px);

@mixin box($width, $height, $background) {
width: $width;
height: $height;
background-color: $background;
}

.fogdog {
@include box($style1...);
}

.badass {
@include box($style2...);
}

اولین کاری که کردیم تعریف 2 متغیر $style1 و $style2 بود. یک لیست و یک مپ.

بعد یک Mixin بنام box تعریف کردیم که 3 متغیر ورودی قبول می کند.سپس این Mixin را دوبار فراخوانی کردیم، هر دو بار با استفاده از … (عملگر گسترش) .

برای گزینه لیست، ما سه آیتم داخل لیست داریم و mixin هم 3 آرگومنت قبول می کند پس هر کدام به نوبت داخل متغیر خود قرار می گیرد.

اگر آیتم های لیست کمتر از 3 تا باشند، یک خطا نمایش داده می شود و اگر بیشتر از 3 مورد باشند، فقط 3 تای اولی استفاده می شوند.

مپ یا همان نقشه نیز شبیه لیست است، تنها تفاوت اش آنجاست که مپ نام آرگومنت را هدف می گیرد یعنی کلید تعریف شده داخل مپ مثلا background با نام آرگومنت همنام اش متصل می شود و ترتیب مهم نیست.

کد بالا نتیجه ای مثل این خواهد داشت

.fogdog {
width: 100%;
height: 70px;
background-color: #fo6d06;
}

.badass {
width: 100%;
height: 100px;
background-color: #bada55;
}

دستور @content

@content اجازه می دهد Mixin را گسترش دهیم. یعنی می توانیم یک بلاک را به mixin پاس دهم.

به صورت مختصر دستور @content این را ممکن می کند

@include grid() {
// css go here
}

برای اینکه mixin بتواند بلاکی را دریافت کند کافیست این کار را انجام دهیم

@mixin grid() {
@content;
}

حالا mixin می تواند کدهای css اضافی را دریافت کندو برای نمونه، مدیا کوئری (Media Query) ها را تصور کنید

@mixin small() {
@media only screen and (max-width: 320px) {
@content;
}
}

دیگر لازم نیست همیشه media query هایتان را تایپ کنید. کافیست به این شکل Mixin فوق را فراخوانی کنید

@include small {
// css code for small screens go here
}

در پایان

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

در اینجا نمونه ای از Mixin های متن باز محبوب را می بینید.

• Andy.scss مجموعه ای از mixin های SCSS.
• SASS-MQ یک mixin برای SASS جهت هندل Media Query ها.
• Bourbon مجموعه ای از Mixin های css.
• Family.scss توسط Lucas Bonomi یا LukyVJ, و کمک می کند کارکردن با nth-child راحت تر مدیریت شود.
• Collection of Mixins با TheModernWeb

شما هم اگر نظر یا ایده خاص در مورد Mixin ها دارید با ما در میان بگذارید.

منبع