توابع
در 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:
