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

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



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

آشنایی با زبان Stylus ( قسمت سوم ) : کامپایل با استفاده از Prepros

2 2367 ۲ آبان ۹۳

در جلسه های قبل خدمتتون عرض کردم که برای کامپایل کردن فایلهای Stylus به CSS دو راه دارین. راه اولش که با استفاده از Node بود رو براتون توضیح دادم. حالا میخوام کامپایل کردن با استفاده از Prepros رو براتون توضیح بدم. همونطور که اطلاع دارین ، Prepros دو نسخه ی مجانی و پولی داره. نسخه مجانی اون امکاناتش کمتره ولی کار مارو راه میندازه.

اگه از Prepros استفاده کنید ، دیگه نیازی به Node و npm و CMD و ... ندارید و همه کارا با ظاهری زیبا انجام میشه. با استفاده از Prepros میتونین به سادگی تمام زبونهای less, sass, scss, compass, coffeescript ,stylus jade, slim, markdown, haml و ... رو Compile کنید.

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

1

اگه ویندوز هستید روی گزینه 1 و اگر مکینتاش هستید ، روی گزینه 2 کلیک کنید. بعد از گذشت چند ثانیه ، نسخه مجانی اون شروع به دانلود میکنه.

بعد از اینکه دانلود تموم شد ، به راحتی اونو در مسیر دلخواه ( بهتره که در C باشه ) نصب کنید.

وقتی نصب تموم شد ، اونو باز کنید.

 

3

همونطور که میبینید ، در ابتدا خالیه. برای اینکه پروژه ای برای کامپایل کردن ، به اون اضافه کنید ، 2 راه دارین :

  • پوشه ی مورد نظرتون رو که فایلهای Stylus درون اون هستند رو درگ کنید و در Prepros اونو Drop کنید
  • از قسمت پایین و سمت چپ روی گزینه ی ADD NEW PROJECT کلیک کنید و آدرس پوشه ی مورد نظر رو انتخاب کنید و روی کلید OK کلیک کنید.

با انجام هر کدوم از دو راه بالایی ، پوشه ی مورد نظر اضافه میشه و شما میتونین عملیات مورد نظرتونو انجام بدین. بصورت زیر :

2

یادتونه جلسه قبل ، یه پوشه بنام Stylus ساختیم و درون اون هم یه فایل بنام style.styl ساختیم. خب حالا همون پوشه رو با یکی از روشهایی که توضیح دادم ، به Prepros اضافه کنید. بعد از اینکار تصویری همانند تصویر بالایی رو خواهید دید.

4

 

  1. در ابتدا این دایره سبز رنگ هست و یعنی این پوشه در حالت Watching هست و اگر کوچکترین تغییری در فایلهای درونش ایجاد کنیم ، توسط Prepros فهمیده میشه. اگر روی این دایره کلیک کنیم ، رنگش خاکستری میشه و یعنی از محیط Watching خارج شدیم.
  2. با کلیک بر روی این گزینه Refresh میشه و اگر فایلهایی رو به پوشمون اضافه کرده باشیم ، باید روی این گزینه کلیک کنیم ، تا Prepros اونارو نشون بده.
  3. با استفاده از این گزینه میتونین تنظیمات پروژتون رو عوض کنید.
  4. با کلیک بر روی این گزینه هم تنظیمات دیگه ای در اختیارتون قرار میگیره
  5. در این قسمت میتونین فیلتر انجام بدین و مشخص کنید که چه فایلهایی با چه پسوندهایی نمایش داده بشه. البته چونکه ما از نسخه ی رایگان استفاده میکنیم ، فقط میتونیم ALL CODE رو انتخاب کنیم که در اون همه فایلها غاطی هستن. اگر روی مورد دیگه ای کلیک کنید ، با این پیام مواجه میشید:
    5اگر خواستین این پنجره رو ببندید ، روی گزینه ی 1 و اگر خواستین نسخه ی پولیش رو بخرین روی گزینه 2 کلیک کنید.
  6. در این قسمت نوع فایل رو نشون میده و همونطور که میبینید ، در اینجا stylus هست.
  7. نام فایل خروجی رو در اینجا قرار میده. با کلیک بر روی این مورد پنجره ای باز میشه که میتونین ، مسیر ذخیره شدن فایل خروجی رو تغییر بدین ، یا اسمشو عوض کنید.
  8. در این قسمت هم نام خود فایل نمایش داده میشه.

حالا برای کامپایل کردن فایلاتون کافیه که روی فایل style.styl در Prepros کلیک کنید تا در سمت راست پنجره ی تنظیمات باز بشه :

6

اگر روی دکمه Compile کلیک کنید ، فایل Stylus در مسیر خروجی که مشخص کردین ، کامپایل میشه و به فایل CSS تبدیل میشه. هر وقت که کامپایل با موفقیت صورت بگیره ، Prepros علامت زیر رو به نشانه موفقیت نشون میده. این علامت در پایین و سمت راست صفحه مانیتورتون هست :

7

اگر عملیات با موفقیت انجام نشه ، معلومه که یکی از مراحل رو اشتباه انجام دادین و علامت زیر رو نشون میده :

8

اگر روی این علامت کلیک کنید ، به یه صفحه منتقل میشید که در اونجا مشکلتون رو بهتون میگه.

9

اگر تیک گزینه Auto Compile خورده باشه ، هر وقت که تغییراتی که در فایل Stylus ایجاد میکنیم و Save میکنیم، بصورت اتوماتیک به CSS تبدیل میشه و دیگه لازم نیس که هر بار روی دکمه ی Compile کلیک کنید.

10

 

اگر تیک Compress CSS رو بزنیم ، کدهای CSS خروجی بصورت فشرده شده در میان.

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

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

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

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

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

  • ‏‏
    طراحی سایت(۸ آبان ۱۳۹۳)

    ممنونم عالی بود..

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram