ما هي ال CSS Sass وهل هي مفيدة وهل يجب تعلمها؟

في عالم تصميم وتطوير المواقع الإلكترونية تلعب CSS دورًا أساسيًا في تحديد مظهر واجهات المستخدم ومع تطور المشاريع وتزايد تعقيد التصميمات، أصبح من الصعب إدارة ملفات CSS كبيرة ومعقدة. هنا يأتي دور CSS Sass، وهي اختصار لـ Syntactically Awesome Stylesheets، والتي تُعتبر امتدادًا متقدمًا لـ CSS.

Sass تقدم أدوات قوية تجعل كتابة الأنماط أكثر تنظيمًا وكفاءة، مثل المتغيرات، التداخل (Nesting)، والخلطات (Mixins)، مما يساعد المطورين على تبسيط الكود وجعله أكثر قابلية لإعادة الاستخدام. في هذا المقال، سنستعرض مفهوم Sass، أهم مميزاتها، وكيفية استخدامها لتحسين سير العمل في تصميم الويب.

 

ما معني معالجات أو CSS Preprocessors

معالجات ال CSS أو ال CSS Preprocessors هي عبارة عن لغات تابعة إلى اللغة الرئيسية CSS وتسمح للمطور بكتابة أوامر برمجية مثل (Functions, Loops, etc..)  ثم يتم تحويلها إلى أوامر CSS عادية.

وهذه ميزة خارقة وستوفر عليك الكثير من الوقت والجهد في كتابة عناصر ال CSS بشكل غير مسبوق، ولهذا هي مهمة ويجب تعلمها لأنها ستضيف لك الكثير كمبرمج.

 

إقرأ أيضاً: What is programming مقدمة في البرمجة، الدليل الشامل 2024

 

أنواع ال CSS Preprocessors

هي أدوات متقدمة تُستخدم لتحسين كتابة ملفات CSS عن طريق إضافة ميزات جديدة تُسهل تنظيم الكود، وتقليل الجهد، وتحسين قابلية الصيانة. هناك العديد من أنواع الـ Preprocessors، ومن أبرزها:  

1. Sass (Syntactically Awesome Stylesheets):

– من أشهر وأقوى الـ Preprocessors.

– يدعم ميزات مثل المتغيرات، التداخل (Nesting)، التوابع (Functions)، والخلطات (Mixins).

– يوفر صياغتين للكتابة:

• SCSS: صيغة مشابهة لـ CSS التقليدية.
• Sass: صيغة مبسطة تعتمد على التباعد بدل الأقواس.

2. LESS (Leaner Style Sheets):

– مكتبة CSS Preprocessor شبيهة بـ Sass.

– مبنية على JavaScript وتُستخدم بسهولة مع مشاريع صغيرة ومتوسطة.

– تدعم الميزات مثل المتغيرات، التوابع، والخلطات.

3. Stylus:

– Preprocessor مرن يُستخدم مع Node.js.

– يوفر صياغة مختصرة ومخصصة، مما يجعل كتابة الأنماط أسرع.

– يتميز بمرونة صياغته التي تتيح كتابة الكود بدون أقواس أو فواصل.

4. PostCSS:  

– ليس Preprocessor بالمعنى التقليدي ولكنه أداة تعالج CSS باستخدام مكونات إضافية (Plugins).

– يمكن استخدامه لإضافة ميزات مشابهة لـ Sass وLESS، مثل المتغيرات والتوابع.

5. CSS-Crush:

– أداة خفيفة الوزن لتحويل كود CSS.

– تُستخدم لضغط الكود وتحسين الأداء، مع توفير دعم للمتغيرات والتكرار.

كل نوع من هذه الـ Preprocessors يتميز بخصائص معينة تناسب احتياجات المشاريع المختلفة. اختيار الأفضل يعتمد على متطلبات المشروع وخبرة المطور.

 

5 مميزات تجعلك تستخدم لغة ال Sass

1- سوف تجعل الكود أسهل في المراجعة والتصحيح: وأبسط مثال على هذا هو المتغيرات، مثال:

$main-color: red;
$sec-color: blue;
H1 { color: $main-color; }
H2 { color: $sec-color; }

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

أما إذا أردت تعديله هنا فبكل سهولة ستذهب لتعديل المتغير في أول الصفحة وستتغير جميع العناصر التي تأخذ هذا المتغير.

 

2- لن تكرر نفس الشئ أكثر من مرة: ويسمى هذا بال (DRY: don’t repeat yourself). بمعنى انك تسطيع كود مرة واحدة من ثم تستدعيه في كل مرة تحتاجه فيها، بدلا من إعادة كتابته مرة أخرى.

إذا أردنا كتابة كود بلغة ال CSS سيكون بهذا الشكل

.main-heading {
  font-family: Tahoma, sans-serif;
  font-size:20px;
  color: red;
}
.sec-heading {
  font-family: Tahoma, sans-serif;
  font-size:20px;
  color: red;
}

نفس الكود مكتوب بال Sass

.main-heading {
  font-family: Tahoma, sans-serif;
  font-size:20px;
  color: red;
}
.sec-heading {
  @extend .main-heading; font-size:14px;
}

نلاحظ هنا استخدامنا لخاصية تسمى @extend، لتساعدنا على استدعاء الكود بدون إعادة كتابته، وستلاحظ أهمية هذه الميزة عند عملك في مشاريع كبرى.

 

إقرأ أيضاً: كل ما تحتاج معرفته عن لغة ال CSS

 

3- سوف تجعل الكود منظم واجمل: تحتوي ال Sass على ميزة مهمة جداً تسمي ال Nesting، وهي وضع جميع العناصر في في العنصر الأب ليجعله أكثر تنظيماً واسهل في القراءة.

دعونا نكتب مثالا لنوضح الأمر أكثر

P {
  font-family: Arial, sans-serif;
  font-size:20px;
  a { color:blue;
  &:hover{ text-decoration:underline; }}
}

هيا بنا نكتب نفس الشئ بكود CSS لنلاحظ الفرق

P {
  font-family: Arial, sans-serif;
  font-size:20px;
}
P a {
  color: blue;
}
P a:hover {
  text-decoration: underline;
  color: green;
}

هل تلاحظ الفرق؟ هذا هو الاختلاف بين لغة ال CSS وال Sass بكل وضوح.

 

4- سوف توفر عليك الكثير من الوقت: ستكون مندهشا عندما تبدأ في العمل بال sass من كم الوقت الذي سوف تقوم بتوفيره لعدم اضطرارك لإعادة كتابة نفس الكود مرة تلو الأخرى، هذا بجانب المميزات الاخرى التي سوف تكتشفها عندما تبدأ بالتعلم.

 

5- سهلة وممتعة وتجعل موقع اجمل: لغة ال Sass سهلة وممتعة جدا بحيث لا يمكنك تفويت هذه الفرصة.

وأيضا توفيرك للوقت الذي كنت سوف تقضيه في إعادة كتابة اكواد ال CSS، سوف تستغله في اظهار الموقع بشكل اجمل وأكثر تنسيقا.

 

من أين تبدأ في تعلم ال CSS Sass

1- كورس ال Sass الشامل من الزيرو ويب سكول

2– دورة 20دقيقة من قناة DevEd

3- FreeCodeCamp course 2 hours

4- Traversy Media Sass Crash course

 

 

في النهاية، تُعد CSS Preprocessors أدوات مبتكرة تُساهم في تحسين كتابة الأنماط وجعلها أكثر تنظيمًا وكفاءة, سواء كنت تستخدم CSS Sass بميزاتها القوية والمتقدمة.

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