illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آشنایی با زبان Stylus ( قسمت یازدهم ) : Condition - Iteration - Interpolation

0 1323 ۳ آذر ۹۳

در این مطلب میخوام در مورد سه موضوع مهم در Stylus براتون توضیح بدم.

Condition :

با استفاده از شرطها میتونین روند کدهارو کنترل کنید و کاری کنید که طی شرایط خاصی یک کد اجرا بشه و اگر اون شرایط رو نداشت ، به هیچ عنوان اجرا نشه.

ما اینکار رو با استفاده از سه کلمه کلیدی if و else و else if انجام میدیم.

همیشه در مقابل if یک عبارت قرار میگیره. اگر خروجی اون عبارت true باشه ، دستورات درون if اجرا میشن و اگر false باشه ، برنامه سراغ else if و else میره. اگر هیچکدوم از عبارات جلوی else if ها هم true نباشد ، دستورات درون else اجرا میشن.

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

شما هم میتونین if رو درون توابع بکار ببرین و هم میتونین توابع رو درون if بزارین.

مثال :

همونطور که میبینید یک تابع بنام box تعریف کردیم و سه تا پارامتر ورودی هم داره. پارامتر سوم اون برابر با false هست. چون این پارامتر در مقابل if هست ، پس دستورات درون if اجرا نمیشن و دستورات درون else اجرا میشن. یعنی اگر هیچ کدوم از if و else if ها اجرا نشدن ، else اجرا میشه.

در بالا یک تابع بنام comparison قرار دادیم و دو عدد رو دریافت میکنه و اونارو از لحاظ کوچک و بزرگی با هم مقایسه میکنه.

Iteration :

با استفاده از Iteration میتونین حلقه تکرار شونده ایجاد کنید. کلمه کلیدی این دستور for هست و فرم کلی اون بصورت زیر هست :

همونطور که میبینید در ابتدا کلمه for رو قرار دادیم و بعد از اون مقادیر رو قرار دادیم. این حلقه ها روی لیستها ( Expression ) کار میکنن. به ازای تعداد اعضای لیست ، این حلقه تکرار میشه و در هر بار مقدار val-name و key-name برابر با یکی از اعضای اون لیست است. قرار دادن مقدار key-name اختیاری هست و بستگی به شما داره. بعد از اون باید از کلمه کلیدی in استفاده کنید و در آخر هم باید نام لیست مورد نظر رو که میخواین تکرار روی اون انجام بشه رو قرار بدین.

مثال :

خروجی کد بالا بصورت زیر هست :

مثالی دیگر :

خروجی :

در مثال پایین میخوایم عبارت key-name رو هم وارد کنیم :

در ابتدا یک لیست بنام fonts تعریف کردیم و سه مقدار رو درون اون قرار دادیم. بعد از اون یه حلقه if تعریف کردیم که روی این لیست تکرار انجام بده. خروجی بصورت زیر میشه :

همونطور که قبلا گفتم اگر خودمون برای لیستها کلید تعیین نکنیم ، کلید عضو اول 0 خواهد بود و یکی یکی به اون اضافه میشه.

همچنین شما میتونین از for همراه با توابع و شرطها و ... نیز استفاده کنید. مثلا فرض کنید میخوایم تابعی بنام sum تعریف کنیم و یک لیست رو دریافت کنه و همه اعضای اون رو با هم جمع کنه :

میبینید که به سادگی هر چه تمامتر اینکارو انجام دادیم و در خط آخر هم خروجی اون رو میبینید.

Interpolation :

با استفاده از interpolation میتونین رشتهارو به هم الحاق بدین و متصل کنید و یا یک متغیر رو به یک عبارت بچسبونین. برای اینکار باید از {} استفاده کنید. مثال :

خروجی کد بالا بصورت زیر هست :

بهترین مثال کاربردی که میشه از اون برای شما زد ، اینه که بیاین در vendor prefix ها از اون استفاده کنید. بعنوان مثال یک تابع بنام vendor میسازم و کدهای زیر رو درونش قرار میدم :

حالا فرض کنید میخواید یک تابع border-radius تعریف کنید. دیگه لازم نیس که همه پیشوندهارو بنویسید ، کافیه که بصورت زیر عمل کنید :

نحوه استفاده از تابع border-radius :

خروجی کد بالا :

من فقط برای شما بصورت مقدماتی توضیح دادم و اگر لازم دارین که بیشتر بدونین میتونین خودتون در زمینه دلخواه تحقیق کنید.

امیدوارم بدردتون بخوره.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram