تعداد بازدید این مطلب: ۰

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

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

 

پیش پردازنده یا preprocessor چیست؟ | بی لرن

 

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

 

انواع پیش پردازنده 

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

 

بنر مقاله sass | بی لرن

 

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

 

پیش پردازنده 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 

 

preprocessor ‌های 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

۱px + 10px  <<

۱۱px

 #۷۷۷ + #۷۷۷  <<

eeeeee #

۱۰px/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

آیا به preprocessor های CSS نیاز است؟

زمانی که می خواهید پروژه های پیچیده ای را انجام دهید، کار با CSS بسیار سخت تر می شود و حتی مشخصه های جدیدی به کد های HTML شما اضافه می شوند. برای برطرف کردن این مشکل راه حل های مختلفی وجود دارد اما هیچ کدام بهتر از پیش پردازنده‌ها نیستند. روش های دیگر باعث ایجاد کد های تکراری در کد نویسی شما می شوند، اما Preprocessor ها از ایجاد کد های تکراری در کد نویسی شما جلوگیری می کنند. preprocessor ها کد های شما را به کد های قابل انعطاف، قابل مدیریت و قابل نگهداری تبدیل می کنند که این موضوع باعث افزایش بهره ‌وری طراحی سایت می شود.

چرا به سراغ پیش پردازنده‌های CSS برویم؟

شاید برای شما هم سوال باشد که چرا باید از پیش پردازنده‌های css استفاده کنیم یا به سراغ آن ها برویم. Preprocessor css دارای مزایا یا قابلیت هایی هستند که در این قسمت به شما معرفی می شود و می توانید به جواب این سوال خود برسید.

  • پیروی کردن از اصل DRY (کد خود را تکرار نکنید)
  • پشتیبانی نکردن از اصل WET (هر چیزی را دو بار بنویسید)
  • استفاده و کمک از ماژولار نویسی و پرتابل نویسی
  • دارای ابزاری موثر برای صرفه جویی در زمان
  • داشتن قابلیت استفاده مجدد از کد
  • سازماندهی بیشتر کد های CSS شما 
  • نگارش آسان کد های CSS
  • دارای تنظیمات مختلف، مدیریت و نگهداری (maintenance) آسان کد ها

 

پیش پردازنده زبان C

 

پیش پردازنده زبان 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

 

پیش پردازنده‌های زبان ++C | بی لرن

 

تمام دستورات Preprocessor زبان ++C همانند دستورات پیش پردازنده زبان C می باشند و در این قسمت به دستورات پیش پردازنده شرطی زبان ++C می پردازیم. در صورت نیاز به Preprocessor های دیگر می توانید از توضیحات موجود در پیش پردازنده‌های زبان C استفاده نمایید.

دستورات پیش پردازنده شرطی

if# و endif#

  عبارت شرطی   if#

مجموعه دستورات

endif#

 elif# همانند else#

 ۱ عبارت شرطی   if#

۱ مجموعه دستورات

 ۲ عبارت شرطی  elif#

۲مجموعه دستورات

.

.

.

 n عبارت شرطی  elif#

n مجموعه دستورات

endif#

ifdef#

 نام ماکرو ifdef#

/* مجموعه ی دستورات */

.

.

.

endif#

ifndef#

 نام ماکرو ifndef#

/* مجموعه ی دستورات */

endif#

 

سخن پایانی

پیش پردازنده‌ها ابزار های بسیار کاربردی هستند که در بین طراحان از اهمیت بسیار زیادی برخوردار هستند. این مقاله برای شناخت کامل شما درباره Preprocessor ها نوشته شده است. در این مقاله به طور جامع درباره موضوعاتی همچون Preprocessor چیست؟، انواع Preprocessor، پیش پردازنده css، پیش پردازنده html و …  پرداخته شده است.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید.