توابع و میکسین ها بسیار شبیه به هم هستند به این دلیل که هر دوی انها متغیر ها را به عنوان ورودی قبول می کنند . درادامه این مقاله قصد داریم شما را با این دو مفهوم در sass و نحوه ایجاد، کاربرد و خروجی های تابع و میکسین ها اشنا می کنیم .

در sass به دو روش می توانیم از توابع استفاده کنیم :

1.استفاده از توابع از پیش تعریف شده ی sass

2. استفاده از توابعی که کاربر آنها را تعریف می کند .

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

به عنوان مثال از  توابع از پیش تعریف شده ی sass می توان به توابع lighten  و Darken  اشاره کرد ، که دو پارامتر از شما دریافت می کنند، پارامتر اول کد رنگی مورد نظر و پارامتر دوم درصدی که می خواهید رنگ مورد نظر در پارامتر اول کم رنگ یا پررنگ تر شود .

در تکه کد بالا با فراخوانی تابع lighten   کد رنگی مورد نظر ما به درصد مشخص شده کم رنگ تر می شود .

مثالی از کاربرد mixin  در sass :

نوشتن بعضی از کدها با css سخت و خسته کننده است . به عنوان مثال نوشتن دستوراتی که نیاز به پیشوند های مرورگر دارند . میکسین این انکان را به شما می دهد که بتوانبید مجموعه ای از دستورات css را در که قرار است در جاهای زیادی استفاده شود را آماده کنید . میکسین می تواند پارامتر ورودی هم قبول کند که در این صورت انعطاف پذیری آن بیشتر می شود . به مثال زیر توجه کنید. در این مثال میکسین پارامتری را به عنوان border-radius  قبول می کند و در داخل میکسین مقدار ان را برای پیشوند های مرورگر های مختلف قرار می دهد .

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

       -o-border-radius: $radius;

          border-radius: $radius;

}

.box { @include border-radius(10px); }

همانطور که در مثال بالا دیدید برای ساختن میکسین از کلمه کلیدی @mixin استفاده می کنیم  و برای استفاده از میکسین مورد نظر نیز از کلمه @include  استفاده می کنیم .  اگر تعداد آرگومان های ورودی مشخص نباشد می توانید در زمان تعریف میکسین در قسمت ارگومان ها علامت سه نقطه را استفاده کنید (...) به عنوان مثال  :

 @mixin box-shadow($shadows...)

به این نکته توجه کنید که میکسین می تواند مقدار ورودی نداشته باشد مثلا همان مثال بالا :

میکسین زیر آرگومان هایی را به عنوان ورودی قبول می کند و محاسبات لازم را برروی انها انجا می دهد و نتیجه خروجی یعنی css  در جایی که دستور @include  نوشته می شود قرار خواهد گرفت .

@mixin my-padding-mixin($some-number) {

  padding: $some-number;

}

 سپس  با دستور @include  میکسین را با مقدار مشخص فراخوانی می کنیم :

.my-module {

  @include my-padding-mixin(10px);

}

 و در انتها نیز css نهایی  در کلاس .my-module قرار خواهد گرفت .

.my-module {

  padding: 10px;

}

 کاربرد تابع یا function  در sass :

یک تابع بسیار شبیه به میکسین است ، خروجی یک function می تواند یک مقدار مشخص باشد . این مقدار می تواند عدد، رشته ، رنگ ، مقدار بولین و یا لیست باشد.

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

@function my-calculation-function($some-number, $another-number){

  @return $some-number   $another-number

}

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

.my-module {

  padding: my-calculation-function(10px, 5px);

}

نتیجه خروجی بعد از کامپایل :

.my-module {

  padding: 15px;

}

شاید شما با قاعده DRY یا همان Don’t Repeat Yourself آشنایی داشته باشید. این قاعده می گوید که در برنامه نویسی و طراحی سایتها نباید هیچ چیز را تکرار کرد . هدف از ارائه sass نیز به همین دلیل بوده است تاجلوی تکرار برخی از دستورات در css را بگیرد و حجم کد های css به خصوص در پروژه های طراحی سایت راکاهش دهد . استفاده از توابع ، وراثت و...  در sass برای این است که نوشتن استایل ها در css را برای طراحان وب سایت ها آسان تر و جذاب تر کند .