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

عالم التصميم وبالأخص عالم تصميم الويب هو من أشد العوالم تنافسية وقسوة , لنعترف بذلك قبل أن نبدأ في المقال...

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

ماهي 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 ستوفر لك ساعات من العمل يمكنك استغلالها بطرق أخرى ...

<iframe src="//www.youtube.com/embed/G_Dolh3BL6g" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>

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

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

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

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

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

 

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

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

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

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

gem install sass

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

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

ما هي الخطوة التالية ؟ 

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

1- انشاء ملف style.sass وكتابة الكود التالي فيه

body
    background : red

2- معالجة الكود وتحويله ل CSS

توجه الى سطر الأوامر , واذهب الى المجلد الموجود فيه ملف style.sass عن طريق عبارة cd ثم اكتب الكود التالي

 

sass --watch style.sass:style.css

 

الآن مع كل مرة تقوم فيها بحفظ الملف أو تحديثه , سيتم معالجة ملف style.sass واضافة النتيجة الى ملف style.css الموجود في نفس المجلد , وفي حال عدم وجوده سيتم انشائه تلقائياً

3- لا تحب سطر الأوامر ؟ اليك الحل

يمكنك استخدام برامج بواجهات بصرية لمعالجة SASS لكن لا تتوقع مني أن أدعم هذه الفكرة , النتيجة واحدة تماماً , لكن أجد ان سطر الأوامر أسرع وأسهل , أما عن البرامج المفيدة في هذه المهمة فيوجد CodeKit , Koala

ما الفرق بين SASS , LESS , SCSS ؟ 

SASS - SCSS 

لا يوجد فرق ! كلاهما نفس اللغة ونفس المحرك الفرق الوحيد يمكن في طريقة الكتابة , ف SCSS التي ترمز الى Sassy CSS يوجد بها أقواس وسيميكولن , ربما لتكون مقاربة أكثر لطريقة كتابة CSS الأصلية , أما SASS فلا يوجد بها ذلك 

LESS - SASS

كل واحد فيهما محرك منفصل عن الآخر , لا تستحوذ LESS على نسبة كبيرة من المستخدمين مقارنة ب SASS 

اذاً , كيف أتعلم SASS ؟ 

 

هل ترى هذا الشاب هنا ؟ من وجهة نظري هو مدخلك الأفضل لعالم SASS , صديقنا في الأعلى هو  Brad Hussy مصمم ومبرمج ويب على ما يبدو , ولديه دورات تعليمية متنوعة في مجالات الويب ويتمتع بطريقة القاء ممتعة وبسيطة , لذا ننصحك البدء في التعلم من عنده , اضافة الى Brad , اليك قائمة ببعض المصادر المساعدة في التعلم

Brad Hussy

CodeAcademy

SASS Officail Guid

Elzero Web School

The Net Ninja