bundles
  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 8) : CSS - قسمت 4

0 101 ۲۷ بهمن ۹۵

frontend

ابزارهای CSS

  • آیا تیم شما از CSS Postprocessor ها استفاده میکنه؟

همونطور که دیدید در جلسات قبلی در مورد CSS Preprocessor ها صحبت کردیم. Pre به معنای قبل از CSS شدن هست. همونطور که دیدید زبانهایی مثل Sass و Less در دسته CSS Preprocessor قرار میگرفتن و امکانات خاصی رو به کدهای شما اضافه میکردن و به کار شما سرعت میبخشیدن. حالا فرض کنید از Sass استفاده کردید و اون رو Compile کردید و کدهای CSS خالص رو بدست آوردید. در این کد قسمتهایی وجود دارن که در همه مرورگرها پشتیبانی نمیشه و میتونیم با استفاده از ابزارهای CSS Postprocessor اونا رو برطرف کنیم. مثالی که در این زمینه وجود داره اضافه کردن vendor prefix ها مثل webkit و moz هست که این کار رو به CSS Postprocessor ها میسپاریم. این ابزارها کارهای دیگه ای رو هم انجام میدن و در ادامه تعدادی از مهمترین هاشونو بهتون معرفی میکنم.prefix free

این تصویر مربوط به PrefixFree هست که کار اصلی اون اضافه کردن Vendor Prefix به کدهای CSS شما هست. این ابزار خیلی منعطف هست و تقریبا میشه در همه جا ازش استفاده کرد. تنها کاری که باید بکنید اینه که اون رو در قسمت Head سایت و بعد از link های مربوط به CSS اضافه کنید. این ابزار بصورت اتوماتیک همه کارها رو برای شما انجام میده.autoprefixer

این تصویر مربوط به Autoprefixer هست که تقریبا کارهایی که ابزار بالایی انجام میده رو به علاوه یه کارهای بیشتر انجام میده. کار اصلی این ابزار هم اضافه کردن Vendor Prefix ها بر اساس اطلاعات سایت Can I Use هست و بصورت دائمی به روز رسانی میشه.pleeease

این تصویر مربوط به Pleeease هست که یک ابزار بر پایه Node.js هست و به نوعی ترکیبی از Preprocessor و Postprocessor هست و همه کارها رو براتون انجام میده. مثلا کدهای Sass شما رو کامپایل میکنه و بعد از اون با استفاده از Autoprefixer، موارد مورد نیاز رو بهش اضافه میکنه. بعد اگر قسمتی از کد در مرورگرهای قدیمی پشتیبانی نشه، فکری به حالش میکنه. کدهاتون رو فشرده میکنه و Source Map هم براش میسازه. کارهای زیاد دیگه ای هم انجام میده.cssnext

این تصویر مربوط به CSSnext هست که با استفاده از اون میتونین کدهای CSS خیلی جدید و مدرن رو استفاده کنید. این ابزار هم به نوعی هم preprocessor هست و هم postprocessor.postcss

این تصویر مربوط به PostCSS هست و ابزار خیلی قدرتمند و پرطرفداری هست که با استفاده از پلاگینهایی که داره، کارهای شما رو خیلی خیلی راحت میکنه. این ابزار هم بر پایه Node.js هست و با استفاده از Javascript کدهای CSS شما رو تبدیل میکنه. مواردی که این ابزار رو تشکیل میدن بصورت زیر هست:

  • Autoprefixer : با استفاده از این مورد، Vendor Prefix ها رو اضافه و مدیریت میکنه
  • CSSnext : با استفاده از این مورد به شما اجازه میده که کدهای بسیار جدید رو استفاده کنید و نگران پشتیبانی شدن در مرورگرهای قدیمی نباشید
  • CSS Modules : با استفاده از این ابزار از قدرت ماژولار بودن بهره میبره و دیگه لازم نیس که نگران نامگذاری کلاسها و معنادار بودن اونا باشید
  • Stylelint : اگه کدهای شما خطا یا مشکلی داشته باشه، به شما میگه و میتونین به راحتی اون رو برطرف کنید
  • LostGrid : سیستم گرید بندی بسیار قدرتمند با استفاده از calc بر اساس کدهای شما و بصورت اتوماتیک

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram