يعلم الجميع مدى أهمية لغة CSS في بناء تطبيقات الويب وإعطائها الرونق والجمال اللذان يجذبان الزائر أوالمستعمل ويؤثران فيه، ولهذا لايمكننا تخيل الويب من دون CSS ورفيقتها الدائمة HTML.
وفي السنوات الأخيرة ارتقت هذه اللغة إلى مستوى آخر بعد ظهور نسخة CSS3 التي جلبت معها مميزات عديدة كانت تنقصها مثل ال Animations وال Transitions وغيرها، وبالتوازي مع هذا التطور ظهرت أدوات جديدة تمكننا من كتابة أكواد ال CSS الأكثر تعقيدا بطريقة سهلة ومختصرة وسميت CSS Preprocessors أو ما يمكن ترجمته ب معالجات ال CSS.
لن نتطرق في هذا المقال لطريقة عمل وتركيب هذه المعالجات (ربما يكون هذا موضوعا لمقال قادم إن شاء الله) ولكن سنذكر بعض الأسباب التي تجعل أي محترف في مجال الويب يفكر في استعمالها والإستفادة من مزاياها العديدة :
1. لن تكرر نفس الشيء عدة مرات
عند استعمال المعالج لن تظطر لإعادة نفس الأكواد عدة مرات (DRY : Don’t repeat yourself) بحيث أنه يكفي كتابة كود معين مرة واحدة فقط ومن ثم استدعاؤه بطريقة ما في كل مرة نحتاجه فيها كما سنرى في المثال التالي :
.large-heading {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 24px;
text-transform: uppercase;
line-height: 1.2em;
color: #ccc;
}
.med-heading {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
line-height: 1.2em;
color: #ccc;
}
.small-heading {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
line-height: 1.2em;
color: #ccc;
}الكود السابق تمت كتابته بطريقة CSS الإعتيادية ونلاحظ وجود عدة أكواد مكررة. إذا أعدنا كتابته بطريقة المعالج Less سنحصل على الكود التالي :
.large-heading {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 24px;
text-transform: uppercase;
line-height: 1.2em;
color: #ccc;
}
.med-heading {
.large-heading;
font-size: 18px;
}
.small-heading {
.large-heading;
font-size: 14px;
}كما لاحظتم، لم يعد هناك لدينا كود مكرر عدة مرات، لقد مكننا Less من استدعاء الكود الخاص بالعنصر .large-heading داخل العناصر .med-heading و .small-heading بطريقة سهلة ومختصرة.
يعتبر Less.js من أفضل معالجات CSS وأكثرها شهرة واستعمالا، كما أن هناك معالجات أخرى منافسة له أبرزها Sass و Stylus.
2. سوف توفر عليك الوقت
عندما لا تكرر نفس الشئ عدة مرات فمن الطبيعي أنك ستوفر على نفسك الكثير من الوقت والجهد الثمينين.
3. صيانة الكود وتعديله سيصبحان أسهل
تمكننا معظم المعالجات المعروفة من استعمال المتغيرات والدوال في ال CSS واستدعائها في عدة أماكن وهذا ما يجعل الكود أكثر تنظيما وسهلا تعديله ومعاينته.
@maincolor: #4575d4;
@accentcolor: #ffa700;
a {
color: @maincolor;
}
primary-nav {
background-color: @accentcolor;
}في المثال أعلاه أنشأنا متغيرين عبارة عن لونين مختلفين، مثلا اللونين الأساسين للموقع، وفي حالة ما أردنا تغيير ألوان الموقع يكفينا تغير قيمتي المتغيرين مرة واحدة في مكان واحد وسيتغير شكل الموقع في الحال، أليس هذا رائعا ؟
4. موقعك سيصبح أجمل
عندما توفر عليك الوقت في كتابة أكواد CSS باستعمال المعالج فمن الطبيعي أنك ستستغل هذا الوقت في تحسين النواحي الجمالية في موقعك كونك تمتلك متسعا من الوقت وبالتالي ستلاحظ من دون شعور أن الناحية الجمالية لتطبيقك ستتحسن بشكل ملحوظ ومعتبر.
5. التنصيب سهل وفي متناول الجميع
جل المعالجات مثل، Stylus، Sass و Less يتم تنصيبها بشكل سهل ويتم تحويل أكواد المعالج إلى أكواد CSS الإعتيادية باستعمال نافذة الأوامر Command Line أو باستعمال برنامج من البرامج العديدة المنتشرة (CodeKit مثلا) التي تقوم بهذا العمل على أحسن ما يرام إذا كنت لست من محبي نافذة الأوامر.
أظنك الآن أصبحت متحفزا بما يكفي لاكتشاف روعة هذه المعالجات والإستعانة بها في مشاريعك القادمة، وسوف تكتشف بنفسك أهميتها ونتائجها الجيدة على جودة أعمالك.
إذا أعجبك الموضوع لا تنسى الإشتراك في نشرتنا البريدية، كما لا تتردد في طرح استفساراتك وأسئلتك في صندوق التعليقات أسفله.
السلام عليكم.
