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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آشنایی با زبان Stylus ( قسمت دوازدهم ) : دستورات شروع شده با @

0 1455 ۳ آذر ۹۳

در این مطلب میخوام براتون در مورد چندتا کلمه و دستور در stylus که با @ شروع میشه ، توضیح بدم.

@import and @require :

با استفاده از این دستورات میتونین کدهایی که در فایلهای دیگه نوشتین رو به فایل جدید هم اضافه کنید. برای اینکار میتونین به روش زیر عمل کنید :

در هرجایی که از import استفاده میکنید ، میتونین از require هم استفاده کنید. این دو تا با هم تفاوتهایی دارن که بعدا براتون توضیح میدم.

همونطور که دیدین باید در مقابل import ، یک مسیر قرار بدین. اگر در آخرش extension رو مشخص کردین که هیچی ، ولی اگه مشخص نکردین برنامه بصورت اتوماتیک styl در نظر میگیره. مثلا برای import کردن فایل border-radius.styl میتونین به روش زیر اقدام کنید. فرض کنید که این فایل در پوشه mixins هست :

همچنین یک امکان خوب که import در اختیار ما میزاره اینه که خودش دنبال فایل مورد نظر در مسیرهای موجود میگرده و فایل مناسب رو پیدا میکنه و import میکنه. مثلا کد زیر رو اگر اجرا کنیم :

کد بالا اول سراغ فایل blueprint.styl و اگه موجود نبود ، فایل blueprint/index.styl رو import میکنه.

require هم شبیه به import هست ، با این تفاوت که یک فایل فقط یکبار import میشه.

@media :

با استفاده از این دستور میتونین media query ها رو تعریف کنید. طریقه استفاده از اونا خیلی راحته و بشکل زیر هست :

خروجی اون بصورت زیر هست :

همچنین شما میتونین درون یک سلکتور هم از این مدیاکوئری ها استفاده کنید. بصورت زیر :

خروجی :

میبینید که به چه راحتی کدهای مورد نظر در جای خودشون قرار گرفتن و کار ما خیلی راحتتر میشه.

همچنین شما میتونین کارای جالبی با این کدها بکنید. مثلا میتونین دستور media و for رو با هم ترکیب کنید و مدیا کوئری های پیچیده تری بسازین :

خروجی :

@font-face :

با استفاده از این دستور میتونین یک فونت رو به سندتون الحاق کنید و از اون در کدهاتون استفاده کنید. مثال :

در مقابل font-family ، نام فونت و در مقابل font-style ، استایل فونت و در مقابل url هم آدرس فونت رو قرار بدین. در نهایت هم از اون فونت استفاده کردیم ، که کافیه همون نامی که براش انتخاب کردیم رو صدا بزنیم. خروجی :

@keyframes :

با استفاده از این دستور میتونین حالت انیمیشنی که با CSS رو تهیه میکردین ، تعریف کنید. برای اینکار باید در مقابل این دستور نام دلخواهتون رو قرار بدین و در بدنه ی اون هم میتونین از for و ... استفاده کنید. مثال :

خروجی :

فکر نکنم نیاز به توضیح داشته باشه ، چونکه همه چیز مشخصه.

@block :

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

روش اول :

روش دوم : استفاده از کلمه کلیدی block

نحوه استفاده از دستورات بالا :

حتما باید اونو در {} قرار بدین. خروجی بصورت زیر خواهد بود :

این توضیحات رو صرفا جهت آشنایی براتون نوشتم. برای مطالعه بیشتر مطالب خوبی در سایتهای خارجی وجود داره.

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram