توابع

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

مثلا یکی از توابعی که از قبل توسط sass تعریف شده تابع  lighten($color, $amount) هست با دو پارامتر، پارامتر اول کد رنگ شما را میگیرد، و پارامتر دوم آن درصدی که میخواهد رنگتان را روشن کند.

مثلا:

}body

  :(background: lighten(#800, 20%

{

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

}body

{;background:#e00

توابعی مثل  arken($color, $amount)که رنگ شما رو به اندازه مقدار درصدی که بهش می دهید تیره تر میکند، grayscale($color) که رنگ سیاه سفید معادل رنگی که به آن میدید رو برای شما می سازد یا مثلا  round($value)که عدد اعشاری را به نزدیک ترین عدد صحیح آن گرد میکند و خیلی توابع دیگر هم وجود دارد.

و اما چطور یک تابع بسازیم و چطور از آن استفاده کنیم؟ کد زیر رو ببینید:

 

 

 

 

 

 

خط اول که متغیر تعریف کردیم تا رنگمون رو داخلش نگه داریم. خط سوم با استفاده از کلمه function @ تابع light_color با یک پارامتر را  تعریف کردیم. پارامتر همون arg $ داخل پرانتر هست. تابعی که تعریف کردیم این رنگی که ما به عنوان پارامتر به تابع میفرستیم رو میگیره و توسط تابع از پیش تعریف شده خود sass رنگ مارو 50درصد روشن تر میکنه و مقدارش رو برمیگردونه. خط 8 هم اومدیم از این تابعی که خودمون ساختیم استفاده کردیم. خروجی بعد از کامپایل:

}body

  ;background: #b3b3b3

  {;color: #333333

نکته ای که باید بهش توجه کرد اینه که با تابع فقط میشه یک مقدار رو برگردوند.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

فایل screen.sass

 

 

 

 

 

 

 

 

 

 

 

 

 

مثالی از نحوه­ی کار کردن با compass :

 

 

 

 

 

 

 

 

 

فایل screen.sass:

 

 

 

 

 

 

 

 

اسکرول به بالا