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

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



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

آشنایی با زبان Stylus ( قسمت پنجم ) : متغیرها

0 1701 ۸ آبان ۹۳

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

همانند دیگر زبانهای برنامه نویسی ، در Stylus هم میتونین متغیر تعریف کنید و داده ای رو درون اون قرار بدین و در هر جا که خواستین از این متغیر استفاده کنید.

مثلا کد زیر رو در نظر بگیرین :

همونطور که میبینید ، در خط اول یک متغیر بنام size تعریف کردیم و در خطوط بعدی از اون استفاده کردیم. اگر کد بالا رو کامپایل کنید ، خروجی بصورت زیر خواهد بود :

میبینید که اون 14px اومده و در سر جاش قرار گفته.

همچنین میتونین از متغیر ها در متغیرهای دیگه استفاده کنید. مثل سایر زبانهای برنامه نویسی. مثلا کد زیر رو در نظر بگیرین :

مییینید که متغیر font-size رو درون متغیر font و بعد از این کار از این متغیر استفاده کردیم. اگه کد بالا رو کامپایل کنید. بصورت زیر میشه :

در متغیر میتونین یک رشته از داده ها رو قرار بدین و در جاهای مختلف از اون استفاده کنید. مثالش رو در بالا دیدید.

خب برای تعریف متغیر یک راه دیگه هم وجود داره. به اینصورت که یک $ رو قبل از متغیر قرار میدیم. کد زیر رو در نظر بگیرین :

میبینید که $font-size رو تعریف کردیم و از اون استفاده کردیم. با کامپایل کردن کد بالا ، خروجی به شکل زیر خواهد بود :

میبینید که متغیرها خیلی ساده هستند.

Char Escaping :

بعضی از مواقع میخواید چیزی که در Stylus مینویسید ، عمل نکنه. مثلا کد زیر رو در نظر بگیرین :

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

میبینید که 1 و 2 جمع شدن و 3 در خروجی بوجود اومده. حالا فرض کنید که میخواید عملگر + کار نکنه. برای این کار میتونین یک بک اسلش ( \ ) قبل از + قرار بدین ، بصورت زیر :

حالا اگر کامپایلش کنید ، بصورت زیر میشه :

میبینید که دیگه + کار نکرده و بصورت مستقیم در خروجی ظاهر شده.

نکته : هر گاه میخواید از عملگر تقسیم ( / ) در قسمت مقادیر استفاده کنید ، باید حتما از پرانتز استفاده کنید. اگه اینکارو نکنید ، تقسیم انجام نمیشه. مثلا کد زیر رو در نظر بگیرید :

میبینید در خط اول پرانتز نزاشتیم و در خط دوم پرانتز قرار دادیم. اگر کد بالا رو کامپایل کنید ، خروجی بصورت زیر هست :

میبینید که اگر از پرانتز استفاده کنید ، تقسیم انجام میشه. پس به این نکته دقت کنید.

خب دوستان خسته نباشید. در قسمت بعدی درباره ی عملگرها ( Operation ) براتون توضیح میدم.

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram