سلام

زمانی که شما از پیش پردازنده‌های CSS نظیر Sass، Less یا Stylus استفاده می‌کنید. در کامپایل فایل‌های css که تولید می‌شوند قابلیت ویرایش مستقیم ندارند

برای پیش پردازنده هایی که از مپ سورس CSS پشتیبانی میکند، ابزار DevTools به شما این اجازه را میدهد تا بصورت زنده پیش پردازنده خود را ویرایش کنید یا صفحه را refresh کنید. زمانی که بخواهید یک المانی را که توسط Less یا Sass تولید شده است اینسپکت کنید، پنل المان‌ها لینکی به فایل سورس اصلی نشان میدهد و نه به فایل .css تولید شده.

هدف اصلی فایل map لینک دادن سورس css به سورس less یا sass در ابزار dev tool کروم است. اگر با ابزار dev tool در کروم کار میکنید میتوانید کد سورس css را ببینید. ولی اگر فایل map را در صفحه اضافه کنید میتوانید کد less یا sass که بر روی این المان اعمال شده است را نیز ببینید.