3.9 KiB
| title | localeTitle |
|---|---|
| CSS Preprocessors | 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