آموزش دستورات کنترلی در Sass – تابع ()if

تابع درون ساخته ی ()if مانند یک عملگر سه گانی عمل می کند. این تابع سه پارامتر به عنوان ورودی می گیرد. اگر پارامتر اول که نشانگر شرط است، صحیح باشد (شرط صادق باشد)، مقدار پارامتر دوم به عنوان خروجی بازگردانده می شود و چنانچه مقدار پارامتر اول غلط بوده و شرط برقرار نباشد، مقدار پارامتر سوم را به عنوان خروجی برمی گرداند. به عبارت دیگر این تابع بر اساس مقدار پارامتر اول (expression)، تنها مقدار یکی از دو پارامتر بعدی را به عنوان خروجی برمی گرداند.

تابع if منحصرا آن آرگومانی که با خروجی خود متناظر هست را ارزیابی می کند. این امر شما را قادر می سازد تا به متغیرهایی اشاره کنید که هنوز تعریف نشده یا محاسباتی را انجام دهید که تحت هر شرایط دیگری ممکن است منجر به تولید خطا شود.

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

if( expression, value1, value2 )

مثال زیر نحوه ی استفاده ی کاربردی از تابع ()if را به نمایش می گذارد:

if_function.html
< html >
   < head >
       < title >Control Directives & Expressions< /title >
       < link rel="stylesheet" type="text/css" href="style.css" / >
   < /head >
   < body >
      < h2 >Welcome to TutorialsPoint< /h2 >
   < /body >
< /html >

فایل style.scss را ایجاد کنید.

style.scss
h2 {
   color: if( 1 + 1 == 2 , green , red);
}

می توانید با اجرای دستور زیر به Sass فرمان دهید که بر روی محتوای فایل مورد نظر نظارت داشته و هرگاه تغییری در آن رخ داد، فایل CSS متناظر را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

پس از اجرای دستور بالا، یک فایل style.css با محتوای زیر ایجاد می شود.

style.css
h2 {
   color: green; 
}

خروجی

جهت مشاهده ی خروجی کد، مراحل زیر را به ترتیب طی نمایید:

1. کد html فوق را در فایل if_function.html ذخیره نمایید.
2. فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر به نمایش در می آید: