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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آشنایی با زبان Stylus ( قسمت دوم ) : نصب Stylus با استفاده از Node

5 2680 ۳۰ مهر ۹۳

در این مطلب میخوام روش نصب Stylus با استفاده از Node رو به شما آموزش بدم. همچنین در این مطلب نحوه کامپایل کردن فایلهای Stylus رو بهتون توضیح میدم.

خب برای شروع CMD رو باز کنید. برای نصب کردن Stylus باید به اینترنت متصل باشید. در CMD عبارت npm install -g stylus رو تایپ کنید و Enter بزنید ، بصورت زیر :

1

بعد از اینکه Enter زدید ، باید چند ثانیه منتظر بمونین تا Stylus دانلود بشه و اتوماتیک نصب بشه. در این چند ثانیه یک علامت Loading هم شروع به چرخش میکنه ، که نشون میده که داره به سرور وصل میشه.

بعد از اینکه کار نصب به پایان رسید ، گزارشی از کارها در CMD نوشته میشه. بصورت زیر :

2

در دستوری که تایپ کردیم ، -g به معنای global یا سراسری هست. یعنی اینکه Stylus در همه جا در دسترس باشه و بتونیم از اون استفاده کنیم و محدود به جای خاصی نباشه. اگر این -g رو نزاریم ، در همه جا نمیتونیم ازش استفاده کنیم. من پیشنهاد میکنم که این -g رو بزارید.

خب تا اینجا نصب Stylus به پایان رسیده و اگر بخواید مطمئن بشین که Stylus روی سیستم شما نصب هست یا نه ، باید عبارت stylus --version رو در CMD تایپ کنید و Enter رو بزنید. بصورت زیر :

3

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

خب دوستان حالا بریم سراغ نحوه ی کامپایل کردن فایلهای Stylus با استفاده از CMD و دستورات موجود.

خب در ابتدا یه پوشه در Desktop بنام stylus درست کنید. از این به بعد فایلامون رو درون این پوشه قرار میدیم. برای شروع یک فایل نمونه بنام style.styl درست کنید. میتونید بصورت زیر عمل کنید :

4

 

بعدش نام فایل متنی رو به style.styl تغییر بدین :

5

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

6

حالا کافیه که روی دکمه ی Yes کلیک کنیم. با این کار فایل style.styl ساخته میشه. شما به هر روش دیگه ای هم میتونین این فایل رو درست کنید.

خب حالا من این فایل رو با ادیتور ( Editor ) باز میکنم. ادیتوری که من در این سری آموزشی از اون استفاده میکنم ، SublimeText 3 هست. وقتی که این فایل رو در ادیتور باز میکنم ، در ابتدا خالی هست. چونکه قبلا چیزی درونش ننوشتم. بصورت زیر :

7

خب حالا من کد زیر رو درونش قرار میدم :

بعدش اونو Save میکنم. میدونیم که مرورگر فایلهای با پسوند Stylus رو نمیشناسه و براش قابل فهم نیس. پس باید این فایل رو کامپایل کنیم.

برای کامپایل کردن ، باید از CMD کمک بگیرین. ابتدا باید مسیر پوشه ای که این فایل درونش قرار داره رو به CMD معرفی کنیم. میدونیم که برای تغییر دادن آدرس CMD باید از دستور cd استفاده کنیم که مخفف Change Directory هست.

از اونجایی که پوشه ما در Desktop بود پس باید آدرس Desktop و پوشه مورد نظر رو تایپ کنید و Enter بزنید. بصورت زیر :

8

با این کار مسیر CMD عوض میشه و به پوشه مورد نظر میریم. حالا میتونیم تغییرات مورد نظر رو انجام بدیم.

برای کامپایل کردن یک فایل Stylus باید از دستور زیر استفاده کنید :

stylus -w filename.styl

بجای عبارت filename ، باید نام فایلی که میخوایم کامپایلش کنیم رو قرار بدیم. کلمه ی w هم به معنای watch هست. یعنی کوچکترین تغییراتی که در فایل مورد نظر ایجاد بشه ، سریعا و بصورت اتوماتیک کامپایل میشه و لازم نیس که با هر تغییری که در فایل میدیم ، یکبار دستور بنویسیم برای کامپایل کردنش. این فرآیند تا زمانی ادامه داره که CMD باز باشه. اگر CMD رو ببندیم دیگه watch صورت نمیگیره.

خب برای کامپایل کردن فایل خودمون که نامش style.styl بود ، بصورت زیر عمل میکنیم :

9

میبینید که خود CMD دستوراتی رو مینویسه و در قسمت 1 نام فایل css که ایجاد شده رو قرار میده و در قسمت 2 نام فایل styl که مبداء هست رو قرار میده. از این به بعد هز تغییری که در فایل style.styl ایجاد کنیم و Save کنیم ، بصورت اتوماتیک کامپایل میشه و در فایل style.css قرار میگیره.

بعد از اینکار اگر در همان پوشه ی stylus در Desktop نگاه کنید ، یک فایل style.css هم ایجاد شده. اون رو با ادیتورتون باز کنید و ببینید که چه چیزایی درونش هست :

10

میبینید که به همین راحتی فایلتون کامپایل شده. حالا از این فایل CSS میتونین در پروژه هاتون استفاده کنید ، چونکه برای مرورگر قابل فهم هست.

حالا برای اینکه از محیط watch در CMD خارج بشین ، دو راه دارین :

  1. کلا CMD رو ببندید.
  2. کلیدهای ترکیبی Ctrl + C رو بزنید ، تا عبارت زیر نمایش داده بشه :
    11حالا اگر کلمه y به معنای yes رو تایپ کنید و Enter بزنید ، از محیط Watching خارج میشید.

اگه بخواید که کدهایی که کامپایل میشه ، فشرده شده و Compress باشه ، باید عبارت -c رو نیز وارد کنید ، بصورت زیر :

stylus -w -c filename.styl

حالا اگه همون فایل style.styl رو با این دستور کامپایل کنید ، خروجیش به صورت فشرده شده هست. بصورت زیر:

12

من مهمترین دستوراتی که وجود داشت رو بهتون گفتم. در درسهای بعدی شاید با کدهای دیگه ای هم آشناتون کردم.

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

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

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

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    تشکر
    1-به غیر از less & sass & stylus باز هم چنین زبانهایی هستند؟
    2-این سه تا چه تفاوتهایی با هم دارن؟
    3-به نظرتون بهتره از کدومش استفاده کنیم؟
    4-کدومش بهینه تر و سبک تره برای استفاده در پروژه های وب؟

    • ‏‏
      محمد اسفندیاری(۱۱ آبان ۱۳۹۳)

      خواهش میکنم
      آره از این نوع زبونها زیاده ولی این سه تا معروفترین و پرکاربردترین هاش هستن
      هدف کلی هر سه زبان یکی هست و اونم ورود برنامه نویسی به CSS هست
      بنظر من از Sass استفاده کنید…..مثلا foundation و bootstrap از sass استفاده کردن
      من بیشتر دیدم که از sass استفاده میکنن ولی شما از هر کدوم خواستین میتونین استفاده کنید
      موفق باشید

    • ‏‏
      محمد اسفندیاری(۱۱ آبان ۱۳۹۳)

      این لینکهارو هم ببینید
      http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
      http://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-preprocessor-shootout–net-24320
      یا علی

  • ‏‏

    تشکر از رسیدگی بی نظیرتون ❓

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram