Mixins در SASS

یک mixin قطعه کدی است که می توانیم در پروژه چندین بار از آن استفاده کنیم.

Mixins در SASS

Mixins در Sass

در سال های اخیر HTML گام های بزرگی در جهت معنادار شدن برداشته است. تگ هایی مانند <aside> و <article> به جای طرح بندی محتوا، بر معنای محتوا تأکید می کنند. متأسفانه، این موضوع در مورد CSS صادق نیست. تعریف کلاس هایی مانند float-left، .row. و col. بهتر از تعریف مجدد property های float برای هر تگ HTML است، اما آنها به سختی به معنای HTML اضافه می کنند.

فریم ورک های CSS وجود دارند که سعی می کنند مشکل را برطرف کنند. (Semantic UI یک مثال شناخته شده است). Sass روش دیگری را از طریق دستور mixin@ ارائه می دهد. Mixins در درجه اول برای ارائه یک استایل غیر معنایی (non-semantic styling) استفاده می شوند، اما می توانند حاوی هر CSS یا Sass معتبری باشند.

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

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

mixin ها نیز می توانند مانند توابع آرگومان بپذیرند. این امر به شما امکان می دهد تا با تعداد محدودی mixin، طیف گسترده ای از style ها را تولید نمایید. سینتکس بسیار ساده است:

Mixins در Sass

هنگامی که میکسین (mixin) را ایجاد کردید، به سادگی از include@ در جایی که می خواهید قوانین در فایل شما گنجانده شود استفاده کنید.

Mixins در Sass

بیایید به یک مثال ساده نگاه کنیم.

Mixins در Sass

CSS به دست آمده به صورت زیر خواهد بود:

Mixins در Sass

mixin در مثال بالا در همان فایلی که در آن استفاده می شود تعریف شده است، اما شما می توانید (و معمولاً) میکسین ها را در یک partial تعریف کنید . قبل از اینکه از دستور include@ استفاده کنید، کافیست خود فایل را import@ کنید.

Sass mixin فقط به تعریف قوانین property محدود نمی شود. Sass mixin همچنین می تواند شامل انتخابگرها (selectors)، از جمله parent selectors نیز باشد. با استفاده از این تکنیک، می توانید برای مثال، تمام قوانین برای یک button مانند link را در یک میکسین تعریف کنید:

Mixins در Sass

همانطور که در زیر نشان داده شده است، از دستور include@ برای اضافه کردن این mixin در یک style استفاده کنید:

Mixins در Sass

و خروجی به صورت زیر خواهد بود:

Mixins در Sass

متغیرهای Mixin

اگر بیش از یک کلاس دارید که شامل این قابلیت است، واضح است که مثال قبلی در تایپ کردن بسیار صرفه جویی می کند و قابل نگهداری تر است. اما اگر چندین کلاس دارید که کارکردهای پایه ای یکسانی دارند، اما باید رنگ های مختلفی را ارسال کنند، چه؟ Sass این کار را آسان می کند: رنگ ها را به عنوان متغیرهایی ارسال کنید که مانند پارامترهای تابع تعریف می شوند:

متغیرهای Mixin

شما آرگومان های متغیر را با استفاده از سینتکس معمولی به mixin ارسال می کنید:

متغیرهای Mixin

این مثال منجر به CSS زیر می شود:

متغیرهای Mixin

Sass حتی به شما امکان می دهد مقادیر پیش فرضی را برای متغیرهای mixin تعیین کنید:

متغیرهای Mixin

هنگامی که یک متغیر پیش فرض را به این روش تعریف می کنید، فقط باید مقادیری را ارائه دهید که با اضافه کردن mixin تغییر می کنند:

متغیرهای Mixin

این منجر به CSS زیر می شود:

متغیرهای Mixin

همانطور که می بینید، قانون a:visited به color:orange ، همانطور که ارائه شده، اختصاص داده می شود، اما دو قانون دیگر دارای مقادیر پیش فرض هستند.

درست مانند زمانی که یک تابع Sass را فراخوانی می کنید، فقط در صورتی که آرگومان ها را نامرتب در نظر نمی گیرید یا برخی را نادیده می گیرید، باید نام پارامتر را وارد کنید. این به خوبی کار می کند (اگرچه دکمه حاصل کمی زشت خواهد بود):

متغیرهای Mixin

متغیرهای متغیر در Sass

برخی از property های CSS می توانند تعداد متفاوتی از متغیرها را بگیرند. یک مثال ویژگی margin است که می تواند از 1 تا 4 مقدار بگیرد. Sass با استفاده از آرگومان های متغیر، که با ellipsis بعد از نام آنها اعلام می شود، از آن پشتیبانی می کند:

متغیرهای متغیر در Sass

با توجه به این تعریف mixin، هر یک از دستورات include@ زیر بدون خطا ترجمه یا transpile می شود:

متغیرهای متغیر در Sass

و با نتایج مورد انتظار زیر:

متغیرهای متغیر در Sass

ارسال محتوا به Mixins

اغلب از mixins برای استایل های استاندارد استفاده می کنید که در جاهای مختلف استفاده می کنید و وقتی آن ها را اضافه می کنید قوانین دیگری را گسترش می دهید. اما می توانید mixin هایی بسازید که با انتقال یک بلوک از قوانین به میکسین به روشی دیگر کار می کنند. برای انجام این کار به متغیری نیاز ندارید. محتوایی که ارسال می کنید از طریق دستور content@ در اختیار میکسین قرار خواهد گرفت:

ارسال محتوا به Mixins

این باعث خروجی CSS زیر می شود:

ارسال محتوا به Mixins

توجه کنید که سینتکس در اینجا از براکت ({}) استفاده می کند، نه پرانتز، تا محتوا را از هر متغیری که mixin ممکن است اعلام کند متمایز کند. شما می توانید از هر دو استفاده کنید.

ارسال محتوا به Mixins

که منجر به CSS زیر می شود:

ارسال محتوا به Mixins

ارسال محتوا به یک میکسین کاری نیست که شما اغلب باید انجام دهید، اما می تواند مفید باشد، به خصوص زمانی که با درخواست های رسانه ای (media queries) یا نام های ویژگی های خاص مرورگر سروکار دارید.

Mixins در Sass متغیرهای Mixin متغیرهای متغیر Mixins ارسال محتوا به Mixins نحوه کار با Sass