آموزش کار با دستور شرطی if در Sass

آموزش Sass – کار با دستور شرطی @if

دستور شرطی @if یک عبارت SassScript را به عنوان پارامتر گرفته و پس از ارزیابی آن، چنانچه شرط برقرار باشد، دستور style دهی مربوطه که در بدنه ی if گنجانده شده را به المان مورد نظر اعمال می کند. در واقع توسعه دهنده می تواند با استفاده از این ساختار کنترلی برای اجرا شدن کد یا دستورات مربوطه، شرط تعیین نمایید.

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

به کد زیر کامپایل می شود:

p {
  border: 1px solid;
}

با استفاده از دستور شرطی مزبور می توانید به طور صریح بررسی کنید آیا مقدار متغیر $var == false یا $var == null است یا خیر و بدین وسیله بین این دو تمایز قائل شوید.

می توان پس از دستور شرطی if@ چندین دستور else if@ و یک else@ بکار برد. با استفاده از این ساختار شما می توانید وضعیتی تعریف کنید که در آن اگر شرط صحیح نبود، شرط دوم که در else if@ تعریف شده بررسی شود و (همین طور دستورهای else if@ بررسی می شوند تا یکی صحیح در آید) باز اگر آن هم صحیح نبود، دستور تعریف شده در else@ اجرا شود. مثال:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

به کد زیر کامپایل می شود:

p {
  color: green;
}