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

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



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

سرعت در کدنویسی 4 : ویرایش زنده استایل صفحات با پلاگین LiveStyle

4769 ۲۴ اسفند ۹۲

بنام خداوند بخشنده و مهربان

با سلام خدمت همه ی سون لرنیا؛امید وارم حالتون خوب و ایام به کامتون باشه.امروز هم با آموزش دیگری با شما همراه هستم.اگر یادتون باشه یه سری آموزشی بنام سرعت در کدنویسی داشتیم که خواستم با این پست تقریبا کاملش کنم.

live-edit

ویرایش زنده ی استایل صفحات

شاید رفرش کردن صفحه بعد از اینکه یه تغییری تو فایل CSSتون تو ادیتور میدید، خیلی آدم رو کلافه کنه! اینکه با هر تغییر کوچیک باید کلا صفحه رو رفرش کنیم یه خورده که نه، خیلی از وقت رو میگیره و اگه میشد با رفرش نکردن صفحه تغییرات اعمالی رو دید، خیلی عالی میشد.

همین باعث شد تا در همین راستا پلاگین و ادیتور هایی ساخته شد تا بدون رفرش صفحه تغییرات رو اعمال کنن.معروف ترین پلاگین ها در این زمینه ، پلاگین LiveReload و پلاگین LiveStyle هست.

Emmet-LiveStyle-530x530

LiveStyle

LiveStyle نیز از خانواده ی Emmet هست.اگه یادتون باشه پلاگین Emmet که روی ادیتور Sublime Text نصب میشد، برای کدهای CSS و HTML اختصاراتی تعیین کرده بود که کار کردن با اون خیلی سرعت در کدنویسی رو افزایش میداد.بعد هم تیم توسعه دهنده ی  Emmet دست به کار شدند و پلاگین LiveStyle رو نوشتند.البته نا گفته نماند که هنوز این پلاگین در نسخه ی بتا هست و ممکنه که گاهی اوقات درست کار نکنه.

این پلاگین تنها بر روی مرورگر گوگل کروم و ادیتور sublime Text  کار میکنه.نکته ی مهمی که باید مد نظر قرار بدید اینه که حتما ادیتورتون نسخه ی 3059 یا همون آخرین نسخه باشه.میتونید ادیتور ST رو از اینجا دانلود کنید.

روش نصب پلاگین LiveStyle

در ابتدا باید package Control رو نصب کنید(اگه قبلا نصب کردید به مرحله ی بعدی برید).آموزش کامل نصب Package Control در اینجا هست.

بعد از نصب Package Control  از منوی بالا  به tools > Command palette برید و یا  Ctrl+Shift+P رو بزنید، در تکست باکسی که میاد "install package" رو تایپ کنید.

command_palette

 

(اگر که گزینه ی "Package Control: Install Package" نیومد ، بدونید که package Control رو به درستی نصب نکردید.)وقتی که گزینه ی install package رو انتخاب کردید بعد از چند لحظه باکس جدیدی در همون قسمت ظاهر میشه که میتونید توسط اون به تمام پلاگین هایی که برای ST ساخته شده دسترسی پیدا کنید.

(دقت داشته باشید که باید به اینترنت متصل باشید.)بعد هم در فیلدی که هست ، "LiveStyle" رو تایپ کنید و روی گزینه ی Emmet LiveStyle کلیک کنید.کمی صبر کنید تا پلاگین LiveStyle دانلود و با موفقیت نصب بشه ، بعد ST رو ببندید و دوباره بازش کنید.

حالا باید به این آدرس برید و افزونه ی LiveStyle کروم رو دانلود و نصب کنید.

خب حالا میتونید از LiveStyle استفاده کنید.

استفاده از پلاگین LiveStyle

حالا صفحه ی مورد نظر رو در مرورگر و فایل سی اس اس اون رو در ST باز کنید.دقت داشته باشید که فایل های CSS تون رو به صورت اکسترنال (یعنی با تگ <link > در هد صفحه ی HTML) ،به صفحه ی HTML وصل کنید.خب حالا در مرورگر دکمه ی F12 رو برنید و روی گزینه ی LiveStyle کلیک کنید و اون رو فعال کنید.

chrome-ext

می بینید که فایل CSS ای که در ادیتور باز کردید،شناسایی شده و حالا میتونید به صورت زنده کد های CSS رو هم از داخل مرورگر و هم از قسمت بازرسی عنصر ادیت کنید و نتیجه در هر دو (مرورگر و ادیتور) ذخیره میشه.

نکته : نکته ای که باید بهش توجه کنید اینه که تا وقتی قسمت بازرسی عنصر مرورگر بازه LiveStyle کار میکنه.

البته گاهی فایل CSS ی که در ادیتور باز کردید شناسایی نمیشه و این کمی عصاب خورد کنه :(

روش کار LiveStyle

شاید این سوال برای شما پیش بیاد که این پلاگین چطور کار میکنه؟!

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

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

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

در پناه حق باشید.

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

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

  • ‏‏
    ارشیا کبیری(۲۹ اسفند ۱۳۹۲)

    از اینکه VIP طلایی رو برای 8 ماه خرید کردم واقعا راضی هستم .امیدوارم آموزشهای تخصصی به همین شکل ادامه پیدا کنه و روزی عنوان بهترین سایت آموزشی رو کسب کنه . با تشکر

    فقط این ” سری کد نویسی سریع ” کدوم قسمته که پیداش نکردم ؟

    • ‏‏
      لقمان آوند(۲۹ اسفند ۱۳۹۲)

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

  • ‏‏

    سلام . مرسی عالی بود

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram