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

دسته‌ها: دوره‌های رایگان، نقشه راه توسعه دهندگان

چهارشنبه 28 اسفند 1398

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

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

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

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

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

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

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

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

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

%body
  %header
    %h1 Hello World
  %section
    %p Lorem ipsum dolor sit amet.

%body

%header

%h1 Hello World

%section

%p Lorem ipsum dolor sit amet.

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

<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</body>

<body>

<h1>Hello World</h1>

</header>

<p>Lorem ipsum dolor sit amet.</p>

</section>

</body>

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

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

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

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

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

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

.new
  color: #ff7b29
  font-weight: bold
  span
    text-transform: uppercase

.new

color: #ff7b29

font-weight: bold

span

text-transform: uppercase

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

.new {
  color: #ff7b29;
  font-weight: bold;
}
.new span {
  text-transform: uppercase;
}

.new {

color: #ff7b29;

font-weight: bold;

}

.new span {

text-transform: uppercase;

}

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

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

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

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

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

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

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

دیدگاهتان را بنویسید لغو پاسخ