پیش پردازنده یا Preprocessor چیست؟
موضوعاتی که برای طراحان سایت بسیار مهم و پر اهمیت است، صرفه جویی در وقت و سرعت بالا در کد نویسی می باشد. بیشتر طراحان سایت به دنبال قابلیت یا ابزاری می باشند که به وسیله آن بتوانند سرعت کد نویسی خود را بالا ببرند تا بتوانند در وقت خود صرفه جویی کنند. به این ابزارها پیش پردازنده گفته می شود. اگر طراح سایت هستید و می خواهید Preprocessor ها را بشناسید و از آن ها استفاده نمایید، پیشنهاد می کنیم این مقاله را مطالعه نمایید تا به وسیله آن بتوانید پیش پردازنده ها را بشناسید و از آن ها استفاده کنید.
پیش پردازنده یا preprocessor چیست؟
پیش پردازنده در زبان انگلیسی با نام Preprocessor شناخته شده است. در دنیای کامپیوتر، پیش پردازنده‌ها به برنامه هایی گفته می شوند که با پردازش بر روی داده های ورودی، داده های خروجی را می سازند. این داده های خروجی در برنامه های دیگر به عنوان داده های ورودی استفاده می شوند. Preprocessor ها علاوه بر رفع مشکلات کد نویسی، روش هایی را برای راحتی و افزایش سرعت کد نویسی نیز ارائه می کنند. عملکرد پیش پردازنده‌ها به نوع طبیعت آن ها بستگی دارد. مثلا یک Preprocessor با ساختار ساده، تنها در جابجایی متن ها یا بسط ماکرویی روی داده ورودی استفاده می شود.
انواع پیش پردازنده
Preprocessor انواع مختلفی دارد که در این قسمت به معرفی آن ها می پردازیم و در قسمت های بعدی مقاله به طور کامل به آن ها پرداخته می شود.
- پیش پردازنده HTML
- Preprocessor css
- پیش پردازنده زبان C
- Preprocessor زبان C++
پیش پردازنده HTML
زبان برنامه نویسی Html تنها دارای یک پیش پردازنده می باشد که این Preprocessor، پیش پردازنده Haml نام دارد. فراموش نکنید که Haml مخفف html abstraction markup language می باشد. شما با کمک این پیش پردازنده می توانید به راحتی و سریعتر کد های خود را بنویسید. به مثال زیر توجه نمایید.
کد زیر در haml نوشته می شود
|
body% header% h1 Hello World% section% .p Lorem ipsum dolor sit amet% |
کد زیر نتیجه کد نوشته در haml می باشد که در html نمایش داده ایم
|
<body> <header> <p1>Hello World</p1> <header/> <section><p>Lorem ipsum dolor sit amet.</p> <section/> <body/> |
پیش پردازنده css
پیش پردازنده‌های CSS به برنامه نویسان css در کد نویسی، صرفه جویی زمان و کاهش میزان کد نویسی کمک بسیاری می کنند. preprocessor های CSS برای ارتقاء عملکرد CSS از قابلیت هایی همچون متغیر ها، اپراتور ها، interpolation ها، توابع و mixins ها استفاده می کنند.
انواع Preprocessor های CSS
- پیش پردازنده Sass
- پیش پردازنده Less
- Preprocessor Stylus
- پیش پردازنده Scss
- Preprocessor Switch CSS
- پیش پردازنده Turbine
- پیش پردازنده CSS-Crush
- Preprocessor Compass
- و …
پیش پردازنده sass و Scss
Sass یک پیش پردازنده css می باشد که به عنوان محبوب ترین Preprocessor CSS به حساب می آید. این پیش پردازنده، همانند پیش پردازنده Haml برای راحت تر و سریعتر نوشتن کد های CSS مورد استفاده قرار می گیرد. همانطور که می دانید، Sass از عبارت Syntactically Awesome Stylesheets ساخته شده است و این Preprocessor دارای ویژگی هایی همچون، تعریف متغیر، فانکشن و… می باشد. Scss مخفف عبارت Sassy CSS می باشد که به عنوان نسخه پیشرفته SASS به حساب می آید. SCSS بر عکس SASS گویا تر، خوانا تر می باشد و یادگیری آن برای طراحان راحت تر می باشد. فراموش نکنید که سینتکس SCSS با پسوند scss. ذخیره می شود.
ساختار sass
|
$color: gray =(my-font($color font-family: Arial, Helvetica, sans-serif font-size: 16px color: $color body background: $color margin: 0 +(my-font(white |
ساختار Scss
|
;$color: gray } (mixin my-font($color@ ;font-family: Arial, Helvetica, sans-serif ;font-size: 16px ;color: $color { } body ;background: $color ;margin: 0 ;(include my-font(white)@ { |
تبدیل SASS به SCSS
| $sass-convert style.sass style.scss |
به غیر از کد بالا می توانید از سایت bet1x00208.com برای تبدیل کد های scss به sass و برعکس، استفاده کنید.
تبدیل scss به sass
| $sass-convert style.scss style.sass |
می توانید از سایت sassmeister.com برای تبدیل Scss به Sass استفاده کنید.
اسکریپت SASS – پوسته های تعاملی
برای راه اندازی SASS Script، باید دستور زیر را در Command prompt که با Ruby باز کرده اید، اجرا کنید.
|
sass -i 1px + 10px << 11px #777 + #777 << eeeeee # 10px/5px << |
نصب sass با Gem
برای استفاده از گزینه SASS باید آن را به کمک Gem و به وسیله Command زیر نصب نمایید.
| gem install sass |
در صورت بروز هر خطا از Command زیر استفاده نمایید.
| sudo gem install sass |
تبدیل فایل های scss به فایل CSS
|
sass <sourcesassfilenamewithpath>.scss : <destinationcssfilenamewithpath>.css sass sassfiles /style.scss : stylesheets/style.css |
پیش پردازنده less
پیش پردازنده LESS از عبارت Leaner Style Sheets تشکیل شده است، این Preprocessor مثل Sass به عنوان پیش پردازنده Css معرفی شده است. بعد از sass دومین Preprocessor محبوب css به حساب می آید و بر خلاف Sass با زبان JavaScript تولید شده است. قابلیت هایی که less می تواند به Css اضافه نماید توابع، متغیر ها، MIXIN ها، عملگر های حسابی و… می باشد، این قابلیت ها باعث ارتقاء css نیز می شوند.
محبوب ترین preprocessor های CSS
- پیش پردازنده sass و scss
- پیش پردازنده less
- Preprocessor stylus
آیا به preprocessor های CSS نیاز است؟
زمانی که می خواهید پروژه های پیچیده ای را انجام دهید، کار با CSS بسیار سخت تر می شود و حتی مشخصه های جدیدی به کد های HTML شما اضافه می شوند. برای برطرف کردن این مشکل راه حل های مختلفی وجود دارد اما هیچ کدام بهتر از پیش پردازنده‌ها نیستند. روش های دیگر باعث ایجاد کد های تکراری در کد نویسی شما می شوند، اما Preprocessor ها از ایجاد کد های تکراری در کد نویسی شما جلوگیری می کنند. preprocessor ها کد های شما را به کد های قابل انعطاف، قابل مدیریت و قابل نگهداری تبدیل می کنند که این موضوع باعث افزایش بهره وری طراحی سایت می شود.
چرا به سراغ پیش پردازنده‌های CSS برویم؟
شاید برای شما هم سوال باشد که چرا باید از پیش پردازنده‌های css استفاده کنیم یا به سراغ آن ها برویم. Preprocessor css دارای مزایا یا قابلیت هایی هستند که در این قسمت به شما معرفی می شود و می توانید به جواب این سوال خود برسید.
- پیروی کردن از اصل DRY (کد خود را تکرار نکنید)
- پشتیبانی نکردن از اصل WET (هر چیزی را دو بار بنویسید)
- استفاده و کمک از ماژولار نویسی و پرتابل نویسی
- دارای ابزاری موثر برای صرفه جویی در زمان
- داشتن قابلیت استفاده مجدد از کد
- سازماندهی بیشتر کد های CSS شما
- نگارش آسان کد های CSS
- دارای تنظیمات مختلف، مدیریت و نگهداری (maintenance) آسان کد ها
پیش پردازنده زبان C
اگر بخواهید که از دستورات Preprocessor در زبان برنامه نویسی C استفاده نمایید، باید این دستورات را با نماد # بنویسید.
دستورات پیش پردازنده مهم در زبان C
| نام دستور | توضیحات |
| define# | یک ماکرو پیش پردازنده را جایگزین می کند |
| include# | یک فایل هدر را به برنامه اضافه می کند |
| undef# | ماکرو تعریف شده توسط دستور define# را حذف می کند |
| ifdef# | اگر این ماکرو تعریف شده باشد، true باز می گرداند |
| ifndef# | اگر این ماکرو تعریف نشده باشد، true باز می گرداند |
| if# | دستور شرطی زمان کامپایل است |
| else# | جایگزینی برای if# در صورت درست نبودن شرط بررسی شده |
| elif# | if# و else# در یک دستور |
| endif# | بخش شرطی پیش پردازنده را خاتمه می دهد |
| error# | پیام خطا را در stderr تنظیم می کند |
| pragma# | دستورالعمل های خاصی را برای کامپایلر انجام می دهد |
ماکروهای از پیش تعریف شده
| نام ماکرو | توضیحات |
| __DATE__ | تاریخ جاری در فرمت “MMM DD YYYY” را در خود ذخیره می کند |
| __TIME__ | زمان جاری در فرمت “HH: MM: SS” را در خود ذخیره می کند |
| __FILE__ | نام فایل جاری را به صورت رشته در خود ذخیره می کند |
| __LINE__ | شماره خط جاری را به صورت یک عدد دسیمال در خود ذخیره می کند |
| __STDC__ | گر عمل کامپایل بر اساس استاندارد ANSI صورت گیرد، مقدر یک را در خود ذخیره می کند |
عملگرهای پیش پردازنده‌ها
عملگر ادامه ماکرو (\)
در صورتی که ماکرو نوشته شده طولانی باشد می توانید از عملگر ادامه ماکرو که با علامت (\) نمایش داده می شود، برای کوتاه کردن ماکرو استفاده نمایید. به مثال زیر توجه نمایید.
|
\ (define message_for(a, b) # (“printf(#a ” and ” #b “: We love you!\n |
عملگر رشته سازی (#)
شما با این عملگر می توانید یک پارامتر یا یک ماکرو را به یک رشته تبدیل نمایید.
|
<include <stdio.h# \ (define message_for(a, b# (“printf(#a ” and ” #b “: We love you!\n } (int main(void) ; (message_for(Carole, Debra ; return 0 { |
عملگر چسباندن token (##)
شما با کمک این عملگر می توانید، دو token را به یک token تبدیل نمایید. مثال زیر نمونه ای از این عملگر می باشد.
|
<include <stdio.h# (define tokenpaster(n) printf (“token” #n ” = %d”, token##n# } (int main(void ;int token34 = 40 ;(tokenpaster(34 ;return 0 { |
زمانی که کد بالا کامپایل و اجرا می کنید، نتیجه زیر را برای شما تولید می کند.
| token34 = 40 |
خروجی واقعی پیش پردازنده به صورت زیر می باشد.
| ;(printf (“token34 = %d”, token34 |
عملگر Defined()
این عملگر مشخص می کند که یک شناسه با دستور define# تعریف شده است یا نه. اگر شناسه با این عملگر تعریف شده باشد، مقدار غیر صفر (true) و در غیر اینصورت مقدار صفر (false) را باز می گرداند. به مثال زیر دقت کنید.
|
<include <stdio.h# (if !defined (MESSAGE# “define MESSAGE “You wish!# endif# } (int main(void ;(printf(“Here is the message: %s\n”, MESSAGE) ;return 0 { |
زمانی که کد بالا کامپایل و اجرا می گردد، نتیجه زیر را تولید می کند.
| ! Here is the message: You wish |
ماکروهای پارامتریک
پیش پردازنده ها دارای یک ویژگی قدرتمندی به نام شبیه سازی توابع با استفاده از ماکروهای پارامتریک می باشند. به مثال و توضیحات زیر توجه نمایید.
|
} (int square(int x ; return x * x { |
کد بالا را می توانید به صورت کد زیر نیز بنویسید.
| ((define square(x) ((x) * (#x |
فراموش نکنید که قبل از استفاده از ماکروهای پارامتریک، آن ها را به وسیله دستور define# تعریف کنید و باید لیست پارامتر ها را بین پرانتز باز و بسته قرار دهید و هیچ فاصله ای را بین نام ماکرو و پرانتزها ایجاد نکنید.
همانند مثال زیر:
|
<include <stdio.h# ((define MAX(x,y) ((x) > (y) ? (x) : (y# } (int main(void) ;((printf(“Max between 20 and 10 is %d\n”, MAX(10, 20 ;return 0 { |
زمانی که کد بالا کامپایل و اجرا می شود، نتیجه زیر را برای شما تولید و نمایش می دهد.
| Max between 20 and 10 is 20 |
پیش پردازنده زبان ++C
 |
تمام دستورات Preprocessor زبان ++C همانند دستورات پیش پردازنده زبان C می باشند و در این قسمت به دستورات پیش پردازنده شرطی زبان ++C می پردازیم. در صورت نیاز به Preprocessor های دیگر می توانید از توضیحات موجود در پیش پردازنده‌های زبان C استفاده نمایید.
دستورات پیش پردازنده شرطی
if# و endif#
|
عبارت شرطی if# مجموعه دستورات endif# |
elif# همانند else#
|
1 عبارت شرطی if# 1 مجموعه دستورات 2 عبارت شرطی elif# 2مجموعه دستورات . . . n عبارت شرطی elif# n مجموعه دستورات endif# |
ifdef#
|
نام ماکرو ifdef# /* مجموعه ی دستورات */ . . . endif# |
ifndef#
|
نام ماکرو ifndef# /* مجموعه ی دستورات */ endif# |
سخن پایانیپیش پردازنده‌ها ابزار های بسیار کاربردی هستند که در بین طراحان از اهمیت بسیار زیادی برخوردار هستند. این مقاله برای شناخت کامل شما درباره Preprocessor ها نوشته شده است. در این مقاله به طور جامع درباره موضوعاتی همچون Preprocessor چیست؟، انواع Preprocessor، پیش پردازنده css، پیش پردازنده html و … پرداخته شده است. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید