
دوره جامع و پروژهمحور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژههای حرفهای مثل دیجیکالا و شمرون کباب مهارتت رو حرفهای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفهای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد میگیری و یاد میگیری چطور پروژههات رو سریعتر و شگفتانگیزتر کنی!
مشاهده بیشترمشخصات مقاله
آموزش توابع Functions در SASS
آموزش Sass – توابع Functions
توابع Functions
SassScript تعداد زیادی توابع کاربردی و مفید در اختیار توسعه دهنده قرار می دهد که به راحتی با گرامر فراخوانی توابع CSS (normal CSS function syntax) قابل فراخوانی و اجرا می باشند.
1 2 3 4 | p { color: hsl(0, 100%, 50%); } <button></button> |
به کد زیر کامپایل می شود:
1 2 3 4 | p { color: #ff0000; } <button></button> |
آرگومان هایی که کلیدواژه هستند (Keyword Arguments)
توابع SASS را می توان با آرگومان های کلیدواژه ای صریح فراخوانی کرد. مثالی که در بالا عنوان شد را می توان به صورت زیر نیز نوشت:
1 2 3 4 | p { color: hsl( $hue : 0, $saturation : 100%, $lightness : 50%); } <button></button> |
اگرچه روش مزبور نسبت به روش اول کمی طولانی تر است، با این حال محتوای فایل stylesheet را خوانا و بهینه تر می نماید. علاوه بر آن به توابع اجازه می دهد تا interface های کارا و منعطف تری را ارائه دهد که آرگومان های زیادی را در اختیار تابع قرار می دهد بدون اینکه فراخوانی آن را دشوارتر کند.
اسم آرگومان های نام گذاری شده (named argument) را می توان به هر ترتیبی به تابع ارسال کرد. آن دسته از آرگومان هایی هم که مقادیر پیش فرض داشته و از قبل مقداردهی شده اند را می توان به تابع ارسال نکرد (قابل حذف هستند). از آنجایی که آرگومان های نام گذاری شده همان اسم متغیر هستند که به عنوان پارامتر به تابع فرستاده می شوند، می توان از زیرخط (_) و خط تیره (dash) بجای یکدیگر در آن ها استفاده کرد.
دستور نگارشی و Syntax
1 2 3 4 | p { color: hsl( $hue : 0, $saturation : 50%, $lightness : 50%); } <button></button> |
HSL مخفف واژگان (بازه ی رنگ) hue، (شدت رنگ) saturation و (میزان روشنی) lightness است که سه جنبه یا خصوصیت از رنگ محسوب شده و برای ایجاد رنگ هایی که با هم مطابقت دارند (با استفاده از شدت رنگ و میزان روشنی) بسیار کاربردی می باشد.
- hue – نشانگر درجه یا بازه ی رنگ می باشد. برای مثال بازه ی رنگ قرمز 120، برای سبز 240 و برای بنفش کم رنگ (pastel violet) 290 می باشد.
- saturation – مقداری بر حسب درصد که میزان شدت و اشباع شدگی رنگ را نشان داده و افزایش می دهد.
- lightness – مقداری بر حسب درصد که میزان روشنی رنگ را کاسته یا مدیریت می کند.
مثال زیر نحوه ی استفاده از توابع CSS در فایل SCSS را نمایش می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < html > < head > < title >Functions Example< /title > < link rel= "stylesheet" type= "text/css" href= "style.css" / > < link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > < /head > < body > < div class = "container" > < h2 >Example using Functions< /h2 > < p >SASS stands for Syntactically Awesome Stylesheet..< /p > < /div > < /body > < /html > <button></button> |
حال فایل style.scss را ایجاد نمایید.
style.scss
از کد SCSS زیر که تابع HSL را در SASS تعریف می کند، استفاده نمایید.
1 2 3 4 | p { color: hsl(290,60%,70%); } <button></button> |
می توانید با استفاده از دستور فوق به تغییرات در فایل مورد نظر گوش فرا داده (نظارت نمایید) و هرگاه که محتوای فایل SASS بروز رسانی شد، کد CSS متناظر را نیز بروز رسانی نمایید:
1 | sass --watch C:\ruby\lib\sass\style.scss:style.css<button></button> |
بعد از اجرای کد عنوان شده در بالا، می بینید که فایلی به نام style.css با محتوای زیر ایجاد می شود.
1 2 3 4 | p { color: #d185e0; } <button></button> |
خروجی
مراحل زیر را دنبال نمایید. کد خروجی خود را در مرورگر به نمایش می گذارد.
- کد بالا را در فایل functions.html ذخیره نمایید.
- فایل HTML فوق را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر در پنجره ی مرورگر به نمایش در می آید.
