ما هي SASS ? وكيف أتعلمها واتعامل معها

عالم التصميم وبالأخص عالم تصميم الويب هو من أشد العوالم تنافسية وقسوة

ماهي SASS ؟

SASS (Syntactically Awesome Style Sheets) هي عبارة عن محرك أو معالج CSS , يقوم فعلياً باضافة خواص برمجية الى لغة الهيكلة CSS ومعروف عن لغات الهيكلة افتقارها للخواص البرمجية , باستخدامك ل SASS سيمكنك القيام بالعمليات البرمجية ضمن ملف CSS العادي , أو تقريباً ضمنه , تضيف SASS الى أكوادك امكانيات هائلة كالمتغيرات و الجمل الشرطية وأترك لك مهمة تخيل ما يمكنك تحقيقه وانجازه بهذه الميزات , أو حتى كمية الوقت الذي ستوفره باستخدامك ل SASS

SASS ليست لغة برمجية , قد يبدو الأمر كذلك عند التعامل معها لكنها في الواقع هي عبارة عن محرك مبني بلغة Ruby , لا يتطلب سيرفر للعمل لكن تشغيله على جهازك سيحتاج منك بعض الأدوات سنقدمها لك خلال هذه المقالة , وقد يبدو الأمر صعباً للوهلة الأولى , لكن بعد امضائك وقت بسيط في التعامل مع SASS ستقع في حبها بشكل سريع وستجد أن التطور الذي تقدمه هذه التقنية الى حياتك المهنية لا يوصف ! لنأخذ السرعة في التصميم على سبيل المثال , هل تعلم أن التصميم باستخدام SASS اسرع بنسبة 40% تقريباً من التصميم بأسلوب CSS التقليدي ؟

يقدم Brad Hussy فيديو بسيط يقارن فيه الفرق بين التصميم بالطريقتين , سترى في نهاية الفيديو أن الصفحة نفسها يتم تصميمها ب 12 دقيقة باستخدام CSS اما SASS فيمكنك انهائها ب 8 دقائق فقط ! قد لا يبدو أمر ال 4 دقائق مهماً للغاية لكن لو قارنا بين الطريقتين بمشروع كامل ستجد ان SASS ستوفر لك ساعات من العمل يمكنك استغلالها بطرق أخرى …

لم علي استخدام SASS في مشاريعي ؟

كما شاهدتم في الفيديو السابق , تتميز SASS بالسرعة والسهولة , وربما الأمر الأهم هو المرونة والتنظيم الذي ستجلبه معها لمشروعك , ما يميز SASS هو مميزاتها البرمجية العالية , لنأخذ مثالاً خاصية الأقسام , تمكنك هذه الخاصية الرائعة من تنظيم تصميمات مشروعك ضمن أقسام مميزة واستدعائها جميعها ضمن ملف SASS واحد ومن ثم تحويلها الى CSS , بهذه الطريقة لن تضطر للبحث ضمن صفحة هائلة تحتوي جميع أكوادك عن السطر الذي يجعل لون النصوص أخضر , فهنا لدينا ميزة السرعة وأيضاً ميزة التنظيم

1- السرعة في انجاز المهام

2- التنظيم و سهولة التعديل

3- المرحلة المتقدمة من CSS

ما الذي أحتاجه للبدء ؟

تكمن فكرة SASS في المعالجة , صفحات HTML الأساسية لا تستطيع تضمين ملفات SASS و لا تستطيع متصفحات الويب القديمة أو حتى الحديثة معالجة SASS , لذا عليك أن تقوم بمعالجتها قبل النشر ولفعل ذلك ستحتاج الى التالي

1- روبي يمكنك تنصيب روبي من الموقع الرسمي كأي برنامج عادي , نحتاج الى روبي لكون معالج SASS مبني عليها

2- SASS طبعاً عليك تنصيب SASS على جهازك , يتم ذلك بسهولة عبر سطر الأوامر بكتابة الكود التالي , لكن عليك التأكد انه روبي تم تنصيبه بشكل صحيح والا سيواجهك خطاً

gem install sass

3- محرر أكواد يمكنك استخدام أي محرر أكواد يناسبك , ليس مهماً كالعادة

4- خيالك  ابدأ الان تخيل تصميمك الجديد , لقد تم تنصيب SASS بنجاح على جهازك

بعد أن تم تثبيت SASS على جهازك  يمكنك الآن الشروع في العمل بشكل طبيبعي , ولكتابة أول ملف SASS يمكنك البدء بالخطوات التالية