30
تشکر

LiveStyle بوسیله Emmet

Emmet

Emmet

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

اما فعلا دو محدودیت وجود دارد. اول اینکه شما باید حتما از ادیتور Sublime Text استفاده کنید، بعدی هم اینکه مرورگر شما باید Google Chrome باشد. البته با استفاده راه هایی هم میتوان از مروگر Safari هم استفاده کرد، که به دلیل استاندارد نبودن از ذکر آن خودداری میکنیم.

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

ابتدا Sublime Text 2 یا 3 و مروگر Google Chrome را آماده داشته باشد سپس به ادامه مطلب بروید تا ادامه کار را با همدیگر انجام دهیم.

1
نصب Package Control

پس از نصب نرم افزار ها سه مرحله دیگر وجود دارد. ابتدا ادیتور Sublime Text را باز کرده و مسیر View > Show Console را طی کنید. پس از کلیک کردن روی گزینه Show Console پنجره ای در پایین ادیتور باز خواهد شد. حالا بسته به نسخه ادیتور یکی از کدهای زیر را اجرا کنید.

Sublime Text 3

 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read()) 

Sublime Text 2

 import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') 

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

2
نصب پلاگین LiveStyle

در ادیتور Sublime Text مسیر Tools > Command Palette را طی کنید. در تکست باکسی که باز میشود عبارت Package Control: Install Package را تایپ و کلید Enter را بزنید. منتظر باشید، پس از چند لحظه تکست باکس دیگری باز خواهد شد، در این تکست باکس عبارت LiveStyle را تایپ و کلید Enter را بزنید.

منتظر باشید تا پلاگین LiveStyle نصب شود.

3
نصب افزونه در Google Chrome

در آخرین مرحله به Chrome Webstore بروید و افزونه LiveStyle مخصوص مروگر کروم را نصب کنید.

خب حالا همه چیز آماده است. حالا برای هر پروژه ای که میخواهید به صورت LiveStyle کار کنید، کافیست در صفحه مربوطه با زدن کلید F12 به Developer Tools مروگر کروم بروید و در تب LiveStyle گزینه مربوطه را چک کنید.

LiveStyle

LiveStyle

به خاطر داشته باشید که فقط با فایلهایی که به صورت External به صفحه وصل شده اند میتوان به صورت LiveStyle کار کرد.

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

  • خب فایر فاکس که بهتره. هرجای صفحه دوسداری کلیک راست کن بعد بزن inspect element بعدش برو style editor به همین راحتی.
    کروم رو بریز دور بدرد برنامه نویسای وب نمیخوره خیلی ابزاراش چرته.
    فایرفاکس ابزارای ساده تر و کاربردی تری داره تازه کار باهاشون شاخ فیل شکوندنم نمیخواد

  • ممنون بسیار کاربردی بود

  • Ali Amini می‌گه:

    داداش محسن فقط یه مشکلی هست.
    همون اول که این کار هارو انجام دادم درست کار میکرد ولی الان که یه بار کامپیوترو ریستارت کردم دیگه کار نمیکنه.
    افزونه ی لایو استایل کروم sublimeText رو نمیشناسه!
    مشکل از چی میتونه باشه؟

  • Ali Amini می‌گه:

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

  • محمود می‌گه:

    ببخشید css reset

  • محمود می‌گه:

    خیلی پیچیدش کردی داش محسن! :)
    چرا از emmet استفاده کنیم تو مرورگر

    حالا فرقی نمیکنه از چه ادیتوری استفاده کنیم!
    برای رفرش کردن استایل بدون رفرش صفحه میتونیم
    توی کروم اپ استور
    css restet
    رو نصب کنید که آیکون سبزی داره
    بعد یه آپشن به راست کلیک اضافه میشه که همه جا میتونی ازش استفاده کنید حالا با امیت یا بی امیت!!!
    اگر هم منظورت فول لایو ویو هستش که چیزی دیگه…

  • hesam می‌گه:

    با سلام و خسته نباشید
    در رابطه با installpackage , sb3
    پس از تایپ package control:install package
    و اینتر زدن هیچ اتفاقی نمی افتد و هیچ باکسی باز نمی شود

    • محسن شفیعی می‌گه:

      شما باید عبارت package control:install packag رو خودتون تایپ کنید، کپی و پیست نکنید.
      در حال تایپ، برنامه فیلتر رو شروع میکنه و عبارت های مشابه رو نشون میده، شما باید عبارت مشابه عبارت بالا رو انتخاب کنید.

  • رضا می‌گه:

    خیلی عالی بود.
    منتظر مطالب بعدی شما هستم…

  • آرین تشکر می‌گه:

    بسیار عالی و مفید بود محسن جان !


  • نظرات این مطلب بسته است.