یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84 دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84
🎯 ثبت نام
بستن تبلیغات
دوره طراحی سایت حرفه‌ای با پروژه واقعی!

دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!

مشاهده بیشتر
دوره آموزش ساخت CSS Framework ( با SASS )

با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!

مشاهده بیشتر

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

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

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

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

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

1
2
3
4
p {
  border: 1px solid;
}
<button></button>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
<button></button>

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

1
2
3
4
p {
  color: green;
}
<button></button>
1396/06/15 3271 904
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...