آموزش Sass ( استفاده از توابع و میکسین ها در sass )

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

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

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

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

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

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

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

 

 

Body{

Background: lighten (#555, )

10%

}

 

 

در تکه کد بالا با فراخوانی تابع 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...)

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


 

@mixin border-radius {

  -webkit-border-radius: 15px;

     -moz-border-radius: 15px;

      -ms-border-radius: 15px;

       -o-border-radius: 15px;

          border-radius: 15px;

}

 

.box { @include border-radius; }

 

 

میکسین زیر آرگومان هایی را به عنوان ورودی قبول می کند و محاسبات لازم را برروی انها انجا می دهد و نتیجه خروجی یعنی 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 را برای طراحان وب سایت ها آسان تر و جذاب تر کند .  
آموزش Sass ( استفاده از توابع و میکسین ها در sass )
سه شنبه 4 آذر 1393 - 16:58:00 3185 آخرین بازدید : شنبه 25 خرداد 1398 - 17:11:21 0
*
*