---
title: CSS Preprocessors
localeTitle: CSS Preprocessors
---
## CSS Preprocessors

أصبحت المعالجات التمهيدية لـ CSS على نحو متزايد الدعامة الأساسية في سير العمل لمطوري ويب الواجهة الأمامية. CSS هي لغة معقدة ودقيقة للغاية ، وفي محاولة لجعل استخدامها أسهل ، يتحول المطورون إلى استخدام معالجات مسبقة مثل SASS أو LESS.

تقوم معالجات CSS المبدئية بتجميع الكود المكتوب باستخدام مترجم خاص ، ثم تستخدم ذلك لإنشاء ملف css ، والذي يمكن عندئذ الرجوع إليه بواسطة مستند HTML الرئيسي. عند استخدام أي CSS Preprocessor ، ستتمكن من البرمجة في CSS عادي تمامًا كما تفعل إذا لم يكن المعالج الأولي في مكانه ، ولكن لديك أيضًا المزيد من الخيارات المتاحة لك. البعض ، مثل SASS ، له معايير نمط محددة والتي تعني جعل كتابة المستند أكثر سهولة ، مثل الحرية في حذف الأقواس إذا اخترت القيام بذلك.

بالطبع ، تقدم CSS Preprocessors ميزات أخرى أيضًا. العديد من الميزات المقدمة تتشابه بشكل لا يصدق عبر المعالجات التمهيدية ، مع وجود اختلافات طفيفة فقط في بناء الجملة. وبالتالي ، يمكنك اختيار أي شخص ترغب به تقريبًا ، وستتمكن من تحقيق نفس الأشياء. بعض الميزات الأكثر فائدة هي:

### المتغيرات

أحد أكثر العناصر استخدامًا في أي لغة برمجة هو المتغير ، وهو أمر تفتقر إليه CSS بشكل ملحوظ. من خلال وجود المتغيرات تحت تصرفك ، يمكنك تحديد قيمة مرة واحدة ، وإعادة استخدامها إذا كان ذلك طوال البرنامج بأكمله. مثال على ذلك في SASS سيكون:

 `$yourcolor: #000056 
 .yourDiv { 
  color: $yourcolor; 
 } 
` 

من خلال الإعلان عن متغير `SASS yourcolor` مرة واحدة ، فمن الممكن الآن إعادة استخدام هذا اللون الدقيق نفسه في المستند بأكمله دون الحاجة إلى إعادة كتابة التعريف.

### الحلقات

عنصر آخر شائع في اللغات هو الحلقات ، وهو شيء آخر تفتقر إليه CSS. يمكن استخدام الحلقات لتكرار نفس التعليمات عدة مرات دون الحاجة إلى إعادة إدخالها عدة مرات. مثال مع SASS سيكون:

\`\` \`ساس for $ vfoo 35px to 85px { .margin - # {vfoo} { الهامش: $ vfoo 10px؛ } }

 `This loop saves us from having the to write the same code multiple times to change the margin size. 
 
 ### If/Else Statements 
 Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be: 
` 

ساس if width (body)> 500px { لون الخلفية: الأزرق. } آخر { لون الخلفية: أبيض. } \`\` \` هنا ، سيغير لون الخلفية اللون حسب عرض نص الصفحة.

هذه ليست سوى عدد قليل من الوظائف الرئيسية لمعالجات برمجية CSS. كما ترون ، فإن معالجات Preprocessors CSS هي أدوات مفيدة ورائعة بشكل لا يصدق. يستخدمها العديد من مطوري الويب ، ويوصى بشدة بتعلم واحد منهم على الأقل.

#### معلومات اكثر:

SASS: http://sass-lang.com/

LESS: http://lesscss.org/

ستايلس: http://stylus-lang.com/

صفحة MDN: https://developer.mozilla.org/en-US/docs/Glossary/CSS\_preprocessor