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

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



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

آشنایی با زبان Stylus ( قسمت آخر ) : توضیح در مورد nib و موارد باقی مانده

0 1553 ۴ آذر ۹۳

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

اولین چیزی که هست اینه که سایت اصلی stylus این امکان رو به شما میده که بصورت online کدهای stylus رو بنویسید و در همون زمان هم نتیجشو ببینید. برای این منظور روی این لینک کلیک کنید تا به صفحه مورد نظر هدایت بشین.

stylus1

توضیحات عکس بالا :

  1. در این قسمت عنوان رو بهتون نشون میده و یک مقدار در مورد اون توضیح میده. مثلا این بخش مربوط به Operator هست.
  2. با کلیک بر روی این گزینه به مرحله قبلی هدایت میشین.
  3. با کلیک بر روی این گزینه به مرحله بعدی هدایت میشین.
  4. در این قسمت کدهای Stylus قرار میگیرن و میتونین اونارو ویرایش ( Edit ) کنید و در همون لحظه نتایج رو ببینید
  5. در این قسمت هم نتایج خروجی بصورت کد CSS نمایش داده میشه

@css :

بعضی مواقع شاید پیش بیاد که بخواین در بین کدهای stylus کدی از نوع CSS رو بنویسید و به stylus بگین که با این کدها مثل css رفتار کن. برای این کار میتونین از این دستور استفاده کنید. مثال :

خروجی :

 دستورات stylus در CMD :

اوایل که طریقه کامپایل کردن کدهای stylus به روش CMD رو براتون توضیح دادم ، به کدهای مهم مربوطه اشاره کردم. اگه میخواین با همه کدهای موجود در این زمینه آشنا بشین میتونین به این لینک برید.

nib :

nib یک افزونه برای stylus هست که در زمینه های cross-browser و css3 به ما کمک میکنه و کدنویسی رو سریعتر از قبل میکنه.

بعنوان یک مثال اگه از nib استفاده کنیم و کد زیر رو بنویسیم و خروجی اونو ببینیم ، بصورت زیر هست :

خروجی :

میبینید که همه prefix ها و ... قرار گرفته و چقد کار مارو راحت میکنه.

برای مطالعه بیشتر میتونین به صفحه اصلی nib مراجعه کنید. من در پایین توضیحاتی مقدماتی خدمتون عرض میکنم.

nib در زمینه هایی مثل gradient و position و clearfix و border radius و ... بهمون کمک میکنه.

نحوه نصب nib :

برای نصب کردن nib باید همانند جلسه های اول از npm استفاده کنید. برای اینکار دستور زیر رو در CMD وارد کنید :

کمی منتظر بمونید تا نصبش کامل بشه و بعد از اون میتونین از nib در پروژه هاتون استفاده کنید. برای کامپایل کردن فایلهای stylus باید مشخص کنید که میخواین از nib هم استفاده بشه. برای اینکار بصورت زیر عمل کنید :

u مخفف use هست ، بمعنای استفاده کردن میباشد. همچنین باید در فایل style.styl که قصد داریم اونو کامپایل کنیم ، nib رو import کنیم ، بصورت زیر :

کد بالا باید حتما در خط اول باشه. کد بالا تمامی امکاناتی که nib داره رو در اختیارمون قرار میده. شاید شما فقط بخواین از قسمت خاصی از nib استفاده کنید. مثلا اگه بخواین فقط از gradient استفاده کنید ، باید بصورت زیر عمل کنید :

بعد از اینکه اینکارارو انجام دادیم ، حالا اگر کد css نوشتیم که نیاز به prefix داشت ، بصورت اتوماتیک در خروجی نمایش داده میشه و لازم نیس که خودمون بنویسیم. مثال :

خروجی :

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

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

اگه کمی و کاستی بود منو ببخشید.

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram