mohammad javad asadi

0 %
محمدجواداسدی
توسعه دهنده وب
  • محل سکونت:
    کرمان
  • شهر:
    کرمان
html
CSS
java script
(PWA)Progressive Web App
WORDPRESS
react
react-native
PHP
  • photoshop
  • xd

پیش پردازنده ( preprocessor ) چیست؟

۱۸ اردیبهشت ۱۴۰۰

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

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

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

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

نکته: مرورگر‌ها چیزی به نام Sass یا Haml یا هر زبان preprocessor دیگر را نمی‌شناسند.

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

 

پیش‌پردازنده (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 ها را دارید لطفا در قسمت نظرات همین صفحه با من به اشتراک بگذارید.

ارسال شده در برنامه نویسان, طراحی وب, مطالب آموزشی, وببرچسپ ها:
یک دیدگاه بنویسید
© تمامی حفوق برای محمدجواداسدی میباشد
ایمیل: asadij313@gmail.com
تلفن تماس :09387370966
logo-samandehi