پیش پردازنده یا preprocessor چیست؟ و چه کاربردی در طراحی وب دارد؟


نویسنده:
چهارشنبه ۲۸ اسفند ۱۳۹۸
۴۱ بازدید
پیش پردازنده چیست

هنگامی که به نوشتن کدهای HTML و CSS مشغول هستید، احتمالا حس کرده‌اید که وقت شما بابت یک سری از کارهای اضافی گرفته می‌شود. مثل بستن تگ‌های HTML یا مثلاً تکرار یک کد رنگ در خطوط مختلف CSS.

در حالی که شاید این کارهای کوچک به تنهایی مشکل ساز نباشند، اما وقتی تمام این کارهای کوچک را در یک پروژه جمع می‌کنید، متوجه وقت زیادی که از شما گرفته‌اند می‌شوید. خوشبختانه این مشکل در دنیای طراحان وب به رسمیت شناخته شده و راه حلی به نام پیش پردازنده یا همان preprocessor برای آن پیشنهاد شده است!

پیش‌‌پردازنده‌ در واقع برنامه‌‌ای است که یک نوع کد را به عنوان ورودی گرفته و آن را به کد دیگری تبدیل می‌کند. در HTML و CSS، اگر بخواهیم محبوب‌ترین پیش‌ پردازنده‌ها را نام ببریم می‌توانیم به Haml و Sass اشاره کنیم. که Haml برای HTML و Sass برای CSS است.

Preprocessor ها علاوه بر اینکه مشکلات نوشتن کد به این زبان‌ها را رفع می‌کنند، روش‌هایی برای راحتی و افزایش سرعت نوشتن کدهای HTML و CSS هم ارائه می‌دهند.

نکته بسیار مهم: مرورگر‌ها چیزی به نام Sass یا Haml یا هر زبان preprocessor دیگر را نمی‌شناسند. در واقع شما بعد از نوشتن کد به این زبان‌ها آنها را کامپایل کرده و به زبان‌های اصلی تبدیل می‌کنید.


پیش‌پردازنده Haml

پیش پردازنده Haml

Haml مخفف عبارت HTML abstraction markup language است. که بهتر است آنرا ترجمه نکنیم! و همین عبارت انگلیسی را بخاطر بسپاریم. Haml یک زبان نشانه گذاری است که هدف آن ساده‌تر و سریعتر نویسی کدهای HTML است.

در این مقاله قصد آموزش Haml را نداریم بنابراین تنها مثال کوچکی از آن می‌آوریم تا با این پیش‌پردازنده بیشتر آشنا شوید:

با نوشتن کد زیر:

در نتیجه کد HTML زیر حاصل می‌شود:

در آینده حتما مقاله‌ جداگانه‌ای برای آشنایی با Haml خواهیم نوشت. برای دریافت اطلاعات بیشتر درمورد Haml، نحوه نصب و استفاده از آن می‌توانید به وبسایت رسمی Haml مراجعه کنید.

پیش پردازنده Sass

پیش پردازنده Sass

Sass یک زبان پیش‌پردازنده است که کدهای آن به زبان CSS کامپایل می‌شوند. دقیقا مانند Haml، این پیش پردازنده هم برای راحت‌تر و سریع‌تر نوشتن کدهای CSS ساخته شده است.

Sass مخفف عبارت Syntactically Awesome Stylesheets است. Sass ویژگی‌های جالبی مانند تعریف متغیر، فانکشن و… دارد که در زبان CSS از آنها محروم هستیم.

همانطور که گفتیم در این مقاله قصد آموزش هیچ پیش‌ پردازنده‌ای را نداریم اما برای آشنایی بیشتر، یک مثال کوچک از Sass را هم می‌آوریم.

کد نوشته شده به زبان Sass:

نتیجه کامپایل شده به زبان CSS:

برای مطالعه بیشتر درمورد نحوه نصب و کار با این پیش پردازنده می‌توانید به وبسایت رسمی Sass مراجعه کنید.



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

اگر تجربه کار با این preprocessor ها را دارید لطفا در قسمت نظرات همین صفحه با ما به اشتراک بگذارید.

مطالب زیر را حتما بخوانید

ساخت فرم ورود و عضویت در وردپرس با افزونه‌ user registration (بخش اول)

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

آموزش افزایش حجم آپلود در وردپرس

گاهی نیاز داریم تا فایل‌هایی بزرگتر از حجم تعیین شده در وردپرس را آپلود نماییم. در این صورت باید روش‌های...

رفع خطای 404 پیوند یکتا در لوکال هاست (localhost)

بعضی اوقات ممکن است با تغییر پیوند یکتا در وردپرس، به خطای 404 بربخورید، برای رفع خطای 404 پیوند یکتا...

Emmet چیست؟ چگونه کدهای HTML و CSS را سریع‌تر بنویسیم؟

Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی...

تنظیم دامنه مجازی روی لوکال هاست

با تنظیم دامنه روی لوکال هاست می‌توانید برای دسترسی به لوکال هاست به جای وارد کردن مسیر دایرکتوری در مرورگر،...

چگونه یک مقاله طلایی برای وب‌سایت بنویسیم؟

نوشتن مقاله به همین سادگی‌ها هم نیست! نوشتن یک مقاله‌ی کاربردی و جذاب اصولی دارد که ما امروز به آن...

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *