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

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



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آشنایی با زبان Stylus ( قسمت اول ) : معرفی Stylus و نصب Node

0 2590 ۳۰ مهر ۹۳

با سلام خدمت دوستان سون لرن.

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

بیشتر شما با Sass و Less کار کردین. اگر کار نکردین مطالب خوبی در موردشون در همین سایت بیان شده.

Stylus یک پیش پردازنده ی CSS هست و میتونین به کمک اون ، سریعتر و بهتر کدنویسی کنید. در زیر چند امکان که Stylus در اختیارمون میزاره رو براتون توضیح میدم.

کد CSS زیر رو در نظر بگیرید :

با استفاده از Stylus دیگه لازم نیس که آکلاد ( { } ) استفاده کنید ، بصورت زیر :

با استفاده از Stylus دیگه لازم نیس در آخر هر خط سمی کالون ( ; ) بزارید ، بصورت زیر :

حتی با استفاده از Stylus میتونین کالون ( : ) نزارین ، بصورت زیر :

در Stylus همچنین میتونین از توابع و متغیرها و ... استفاده کنید. همونطور که میدونید نمیشه در CSS متغیر و تابع و .... تعریف کرد و به همین علت زبونهایی مثل Sass و Less و Stylus اومدن که این امکانو در اختیارمون بزارن. وقتی که کدهاتون رو به زبون Stylus نوشتید ، لازم هست که اونارو کامپایل ( Compile ) کنید. یعنی کدهاتون رو به زبون CSS تبدیل کنید تا برای مرورگر قابل فهم باشه. چونکه مرورگر زبون Stylus و Sass و ... رو متوجه نمیشه و باید ابتدا با استفاده از ابزارهای موجود ، فایلامونو کامپایل کنیم و به فرمت CSS تبدیل کنیم. در این مورد در جلسات بعدی مفصل توضیح میدم.

فرمت فایلهای Stylus بصورت .styl میباشد.

در زیر تعدادی از قابلیتهای دیگر Stylus رو بهتون میگم :

  • متغیرها
  • توابع
  • محاسبات
  • شرط ها
  • حلقه های تکرار
  • گزینشگرهای تو در تو
  • و ...

برای استفاده از Stylus دو راه پیش روی شما هست.

  1. نصب Node و نصب Stylus از طریق npm
  2. نصب یک Compiler قوی ، همانند Prepros. کامپایلر Koala هنوز از زبون Stylus پشتیبانی نمیکنه.

در این جلسه نصب node و npm رو بهتون توضیح میدم و در جلسه بعد ، نحوه نصب و راه اندازی Stylus رو بهتون میگم.

خب برای شروع ابتدا باید به سایت Node برید.

2

حالا روی دکمه ی Downloads کلیک کنید. با این کار به صفحه ی دانلودها منتقل میشید :

3

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

حال شروع به نصب Node کنید.

تمام مراحل رو بدون اینکه چیزی رو تغییر بدین ، روی دکمه ی Next کنید. با این کار هم Node و هم npm که مخفف node pack manager هست ، نصب میشن.

بعد از اینکه نصب تموم شد ، روی دکمه Finish کلیک کنید.

حالا برای اینکه مطمئن بشین node و npm نصب شدن ، باید از CMD کمک بگیریم. ابتدا روی دکمه Start ویندوز کلیک کنید و عبارت CMD رو تایپ و روی cmd.exe کلیک کنید :

4

با این کار CMD باز میشه :

5

برای اینکه بفهمیم node نصب شده یا نه از دستور node --version استفاده میکنیم و Enter میزنیم :

6

همونطور که میبینید v0.10.29 نوشته شده و بهمون میگه که این Node که روی کامپیوتر ما نصبه ، چه نسخه ای هست. پس یعنی node بر روی کامپیوتر ما نصبه. اگر نصب نبود ، یک خطا به ما میداد. اگر با خطا مواجه شدید یجای کار رو درست انجام ندادین.

برای اطمینان از نصب شدن npm هم باید از دستور npm --version استفاده کنید. بصورت زیر :

7

همونطور که میبینید ، npm هم بر روی کامپیوتر من نصبه و نسخه ی اون رو بهم نشون میده.

تا اینجا node و npm رو نصب کردیم. در جلسه بعد نصب stylus رو به وسیله ی node بهتون توضیح میدم.

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram