49 lines
3.9 KiB
Markdown
49 lines
3.9 KiB
Markdown
|
---
|
||
|
|
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
|