مقدمة Sass

ما يجب أن تعرفه

قبل المتابعة، يجب أن تكون لديك فهم أساسي فيما يلي:

  • HTML
  • CSS

إذا كنت ترغب في تعلم هذه المواضيع أولاً، فما عليك سوى زيارة الصفحة الرئيسية زيارة هذه الدروس.

ما هو Sass؟

  • Sass يشير إلى Syntactically Awesome Stylessheet (ملف النصي للأسلوب بجملة رائعة)
  • Sass هو امتداد CSS
  • Sass هو معالج CSS
  • Sass متوافق تمامًا مع جميع إصدارات CSS
  • يقلل Sass من التكرار في CSS مما يوفر الوقت
  • تم تصميم Sass بواسطة Hampton Catlin وأنتجته Natalie Weizenbaum في عام 2006
  • Sass يمكن تنزيله واستخدامه مجانًا

لماذا يجب استخدام Sass؟

يصبح الملف النصي للأسلوب أكبر وأكثر تعقيدًا وأكثر صعوبة في الصيانة. هذا هو المكان الذي يمكن أن يساعد فيه معالج CSS.

Sass يسمح لك باستخدام خصائص غير موجودة في CSS مثل المتغيرات، القواعد المدمجة، mixin، الاستيراد، الوراثة، الدوال المدمجة وأدوات أخرى.

مثال بسيط جدًا ولكن مفيد جدًا حول Sass

افترض أن لدينا موقعًا يحتوي على ثلاثة ألوان رئيسية:

#a2b9bc
#b2ad7f
#878f99

إذاً، كم مرة تحتاج إلى إدخال هذه القيم HEX؟ مرات عديدة. ماذا إذا تغير اللون نفسه؟

يمكنك كتابة الكود التالي باستخدام Sass بدلاً من إدخال القيم المذكورة أعلاه عدة مرات:

مثال Sass

/* تعريف المتغيرات لللون الأصلي */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* استخدام المتغيرات*/
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

لذا، عند استخدام Sass، إذا تغير اللون الأصلي، يكفي تغييره في مكان واحد فقط.

كيف يعمل Sass؟

المتصفح لا يفهم رمز Sass. لذلك، تحتاج إلى معالج Sass لتحويل رمز Sass إلى CSS القياسي.

هذا العمل يسمى التحويل (transpiling). لذا، تحتاج إلى تقديم رمز Sass إلى محول (برنامج) للحصول على رمز CSS.

نصيحة:التحويل هو مصطلح يستخدم لتحويل/ترجمة رمز مكتوب بلغة واحدة إلى لغة أخرى.

نوع ملف Sass

امتداد ملفات Sass هو ".scss".

تعليقات Sass

Sass يدعم التعليقات القياسية لـ CSS /* تعليق */، بالإضافة إلى دعم التعليقات الداخلية // تعليق:

مثال Sass

/*تحديد الألوان الرئيسية*/
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* استخدام المتغيرات*/
.main-header {
  background-color: $primary_1; // يمكنك إضافة تعليق داخلي هنا
}