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

- visibility ۰ mode_comment

در این مطلب میخوام براتون در مورد چندتا کلمه و دستور در 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

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

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.