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

سنتحدث في هذا المقال عن ال CSS Sass

مع التطور الرهيب الذي حدث في مجال صناعة الويب وتطور لغة ال CSS إلى إصدارات احدث مع إضافة مميزات رائعة مثل ال Animations, Transitions وغيرها من المميزات.

وبالتوالي مع تطور لغة ال CSS كما ذكرنا ظهرت فكرة ال CSS preprocessors أو معالجات ال CSS.

 

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

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

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

 

إقرأ أيضاً: مدخل إلى البرمجة

 

أنواع ال CSS Preprocessors

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

 

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

 

 

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