دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!
مشاهده بیشترمشخصات مقاله
-
906
-
0.0
-
3291
-
0
-
0
آموزش کار با دستور شرطی 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> |