در حال بارگزاری ...

نحوه استفاده از Mixin در SASS

توسط الهام غایب
آخرین به روز رسانی یکشنبه 28 مهر 1398

Sass فوق العاده است. فرقی نمی‌کند آن را به عنوان Sass استفاده کنید یا SCSS، در هر صورت باعث افزایش بازدهی شده و به ساده سازی وظایف پیچیده CSS کمک می‌کند. در این پست از لیداوب به استفاده از Mixin در SASS پرداخته شده و به سوالاتی در مورد چگونگی استفاده از Mixin پاسخ داده می‌شود. با ا ...


در این پست از لیداوب به استفاده از Mixin در SASS پرداخته شده و به سوالاتی در مورد چگونگی استفاده از Mixin پاسخ داده می‌شود. با ادامه این مقاله همراه ما باشید.

 بیشتر بخوانید:

Mixin چیست؟

Mixin یک تکه کد است که به ما اجازه گروه بندی اعلان‌های CSS را می‌دهد و می‌توانیم از آن‌ها در تمام سایت استفاده کنیم. برای مثال، نمایش یک عنصر 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‌ها را تعریف کنیم، می‌توانیم نحوه استفاده از آن را در کد SCSS یاد بگیریم. برای استفاده از یک Mixin، ما از @include و پس از آن از نام mixin و یک (;) استفاده می‌کنیم:

.row {
    @include flex;
}

پس از کامپایل کردن این کد CSS، فایل CSS ما باید به شکل زیر باشد:

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

افزودن آرگومان به Mixin

Mixinها می‌توانند در آرگومان‌ها قرار بگیرن تا خروجی‌های داینامیک‌تری ایجاد کنند. برای مثال، فرض کنید یک سیستم grid می‌سازیم و می‌توانیم انتخاب کنیم که از flexbox در آرایش خود استفاده کنیم یا float. می‌توانیم یک mixin ایجاد کرده، یک آرگومان به آن اضافه کرده تا بگوییم بین flex یا float یکی را انتخاب کند. برای افزودن این آرگومان‌ها به mixin، می‌توانیم به صورت زیر عمل کنیم:

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

حالا وقتی Mixin grid را فراخوانی می‌کنیم باید یک آرگومان واقعی به mixin اضافه کنیم. همانطور که انتظار دارید، آرگومان به این شکل به mixin اضافه می‌شود:

@include grid(true);

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

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

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

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

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

می‌توانیم به هر مقدار که می‌خواهیم متغیر اضافه کنیم اما هر متغیری که دارای آرگومان اختیاری و پیشفرض می‌باشد، باید در انتهای فهرست آرگومان‌ها قرار بگیرد. یعنی شما نمی‌توانید این کار را انجام دهید:

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

SASS یک پیغام خطا مانند این را به شما نشان می‌دهد:

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

توجه داشته باشید که آرگومان‌های پیش‌فرض نمی‌توانند متغیر، لغت کلیدی و غیره باشند.

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

در CSS، ما خصوصیاتی مانند padding و margin داریم که می‌تواند مقادیر یک تا چهار را برای هر آرگومان را بپذیرد.به صورت زیر:

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};
    }
}

حالا $values به عنوان لیست در نظر گرفته نمی‌شود بلکه یک متغیر نرمال است:

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...);
}

اولین کاری که انجام دادیم تعریف دو متغیر $style1 و $style2، یک لیست و یک نقشه است. سپس، یک  Mixin box اضافه می‌کنیم که ۳ آرگومان را می‌پذیرد. سپس، این mixin را دوبار فراخوانی می‌کنیم و هر دو بار از برای افزودن یک لیست به عنوان تنها آرگومان در جمله اول، استفاده کرده و در جمله دوم، نقشه را اضافه می‌کنیم.

برای لیست، چون ما سه آیتم داریم و mixinها هم سه آرگومان دارند، هر آرگومان به ترتیب اضافه می‌شود. اگر لیست دارای طولی کمتر از ۳ باشد، خطا ایجاد می‌شود در غیر این صورت، تنها ۳ آیتم اول لیست را می‌پذیرد. یعنی لیست ما باید دارای ده آیتم بوده و تنها ۳ آیتم اول به لیست اضافه شود. نقشه هم به همین ترتیب به عنوان لیست در نظر گرفته می‌شود، تنها تفاوت در این است که نقشه به عنوان آرگومان کلمه کلیدی در نظر گرفته می‌شود (یعنی مقادیر کلیدی نقشه باید با نام متغیرها همخوانی داشته باشند)

تکه کد بالا به این شکل کامپایل می‌شود:

.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 grid   ما می‌تواند css بیشتری دریافت کند. یک استفاده از این روش در مدیا کوئری است. تکه کد زیر را در نظر بگیرید:

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

به جای آنکه مجبور باشیم هر بار مدیا کوئری را تایپ کنیم، این روش بهتری برای رسیدگی به آن‌ها است:

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

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

نتیجه گیری

Mixinها مشخصا بسیار کاربردی بوده و جریان کاری شما را سرعت می‌بخشند و می‌توان کارهای زیادی با استفاده از آن‌ها انجام داد. در اینجا، یک مثال از mixinهای اوپن سورس آورده شده است:

- Andy.scss مجموعه‌ای از mixinهای SCSS

- SASS-MQ یک sass Mixin برای مدیریت مدیا کوئری است

- Bourbon یک مجموعه از mixinهای CSS

- Family.scss باعث می شود کار با سلکتورهای nth-child قابل مدیریت شود.

- Collection of Mixins توسط TheModernWeb

مطالعه مقالات بیشتر در لیداوب:

شما هم می‌توانید Mixinهای مورد علاقه خود را در زیر این پست به اشتراک بگذارید. همچنین، ما در بخش دیدگاه‌های لیداوب، مشتاق دریافت نظرات و سوالات شما در زمینه طراحی سایت هستیم.

دیدگاه ها

دیدگاه ها : 1


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
ثبت امتیاز
1.7 (3 رای)

   لطفا صبر کنید ...